Understanding NodeList

-
A NodeList is a type of collection of nodes that is returned by some DOM methods, such as querySelectorAll. It represents a (non-live) list of nodes or elements in an HTML document. Each node in the NodeList corresponds to an element found by the specified selector.

Key characteristics of NodeList:

Node Collection: The NodeList contains DOM nodes, such as elements, attributes, or even text nodes.

Order and Indices: Nodes in the NodeList are maintained in the order they appear in the document. You can access nodes using indices, similar to an array.

Static: A NodeList is static, meaning it does not automatically update if the document changes after the list is created. If you need a dynamic collection that reflects changes in the document, you may consider using an HTMLCollection or approaches like Mutation Observers.

Here is an example of how you can use a NodeList:


In this example, document.querySelectorAll('p') returns a NodeList containing all <p> elements in the document. Then, a forEach loop is used to iterate over the paragraphs and display their content.

Comments

Post a Comment

Popular posts from this blog

querySelector

-
Image
'querySelector' is a method in TypeScript and JavaScript that allows you to select elements from an HTML page based on a CSS selector. It is primarily used to interact with the Document Object Model (DOM) and manipulate HTML elements. Here's a detailed explanation of querySelector : CSS Selectors: querySelector uses CSS selectors to find elements on the page. This means you can select elements based on their IDs, classes, types, or any other CSS attribute. Element Return: The querySelector method returns the first element that matches the specified selector. If no element is found, it returns null. Functionality: The querySelector method traverses the DOM from the element where it is called (usually document to select from the entire document) and returns the first element that matches the provided selector, following the depth-first search and order of encounter. Here's an example of using querySelector in TypeScript: Suppose you have a button in...
Read more

Parameters "arr", "not", and "orr" in TypeScript

-
Image
The parameters arr , not , and orr play an essential role in TypeScript 's infer function, allowing for fine-grained control over how types are inferred. Parameter arr : Description: This parameter specifies whether the inferred type should be an array. Possible values: true: Indicates that the inferred type will be an array. false: Indicates that the inferred type will not be an array. Examples: Parameter not: Description: This parameter specifies that the inferred type cannot be the specified type. Possible values: The type that should not be inferred. Examples: Parameter orr : Description: This parameter specifies that the inferred type must be one of the specified types. Possible values: A list of types. Examples: Notes: The parameters arr , not , and orr can be used together. The order of the parameters is not relevant. These parameters provide powerful tools for controlling how TypeScript infers types, allowing for precise and flexible type definitions in your code....
Read more

Understanding the Use of type in TypeScript

-
Image
In TypeScript , using the type keyword is a fundamental way to define custom data types. The type declaration is one of the main features that distinguish TypeScript from JavaScript , as it allows you to explicitly specify the types of variables, functions, objects, and more. This not only aids in code development and maintenance but also enhances autocomplete features and compile-time checks, reducing runtime errors. How to Use type You can use the keyword type to create a type alias that can be reused in various places in your code. A type alias can be primitive, a union, an intersection, a literal type, and more. Basic Example: In this example, Name is a type representing a string. Whenever you need a variable that should store a name, you can use the type Name instead of string , making the code more readable and manageable. Unions: Intersection: Literal Types: Why Use type Readability: Using type makes the code more readable. Type names can describe what the variable rep...
Read more