HTML DOM Node Lists


In the HTML DOM, a NodeList object is a collection of nodes returned by methods such as getElementsByTagName() or querySelectorAll(). A NodeList is similar to an array in that it has a length property and can be accessed by index. However, a NodeList is not an array and does not have all the methods and properties of an array.

Here are some common methods and properties for working with NodeList objects:

NodeList.length

This property returns the number of nodes in the NodeList.

Example

Preview

NodeList.item()

This method returns the node at the specified index in the NodeList.

Example

Preview

NodeList.forEach()

This method allows you to iterate over NodeList with a loop.

Example

Preview

NodeList.entries()

This method returns an iterator that allows you to loop over the NodeList and access both the index and the node on each iteration.

Example

Preview

NodeList.values()

This method returns an iterator that allows you to loop over the NodeList and access the nodes on each iteration.

Example

Preview

The NodeList is a live collection, so if you edit the document by adding or removing nodes, the NodeList will update immediately to reflect those changes. Creating dynamic and responsive web apps can benefit from this.

The NodeList object is, in essence, a collection of nodes that gives you access and control over a set of nodes in the HTML DOM. You can create robust and dynamic web apps by combining the NodeList object with other HTML DOM methods and attributes.