What is a nodeList object in JavaScript?

NodeList is an internal JavaScript class that has the following interface:

[Exposed=Window]
interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

That is, an object of NodeList will have:

• A item method that receives a index numeric argument and returns a Node element;
• An attribute length numeric;
• Is an iterative of elements Node ;

When you have a tree-based structure, the node, Node , is the basic element of the structure. In the case of JavaScript, the DOM is a tree of nodes. The class NodeList represents a set of these nodes, being returned, for example, by the document.querySelectorAll or the element.childNodes .

You can access one of the elements of the list through the item method by identifying the index you want to access or iterate over the object.

const lis = document.querySelectorAll('li');

// Acessando via método item:
console.log( lis.item(0) );

// Iterando sobre o objeto:
for (let li of lis) {
  console.log(li);
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

The NodeList , although it resembles an array , has no equivalencies. One is a collection of nodes, another is a ... array . NodeList , for example, will always represent a collection of Node elements, sorted according to their respective positions within the tree and is immutable, you are not able to add a new element to a NodeList - need to change the tree directly. An array is a set of values with no direct relation to each other.

Its usefulness is intrinsic in its definition: to represent, as an object, a collection of nodes in list form.

Other related readings:

• What's the difference of NodeList for HTMLCollection?
• What's the difference between HTMLCollection, NodeList and Object?
• View object NodeList content

What is a nodeList object in JavaScript?

As the name itself says is a DOM nodes list. Documentation . This includes the attributes and the text of the nodes.

  

How can I access elements of a nodeList?

Like any data collection, it accesses each node through an index to the element it wants. One of the most common ways to do this is with for .

var list = document.querySelectorAll('input[type=checkbox]');
for (var checkbox of list) {
    checkbox.checked = true;
}

Nearly everything from an array works on it, but it's a collection with another structure. And it does not provide dictionary access, so it can not access by the names of the elements found in the selected element.

document.querySelectorAll("p")[1] //pega o segundo elemento da lista de nós de p

You can convert it to a Array and access it in this way. The array will be static, or the data does not change. The nodeLIst is alive, so because it is a direct reference to the DOM, as the DOM is being modified by the page, the content found there suffers reflection from those DOM changes. Not all iterations with a variable that has a nodeList will be equal.

  

What is the difference between a conventional array and a nodeList?

An array has all positions in sequence

  

How useful is it?

It stores a collection of DOM elements selected by one of the browser API functions by selecting what you want. There you can make several manipulations on each of these elements. Usually it is useful when you need to do operations on all elements or at least a portion of them. Understand that manipulating does not have to be tampering, it may be just checking. What you can do individually with an element in this case can do in general.

The most common function that returns this collection is document.querySelectorAll() . . The Node.childNodes property also has a reference to this.