What is a nodeList object in Javascript?

Asked

Viewed 1,223 times

5

I know that in Javascript we have arrays common, which, most languages have.

But my doubts are about a nodeList in Javascript.

  1. What is an object nodeList in Javascript?
  2. How can I access elements of a nodeList?
  3. What’s the difference between a array conventional and a nodeList?
  4. What is its use?
javascript

  • I do not understand why the downvote. Could you put in the comments please? So I can improve the question, if that’s the case, or if it’s a duplicate.

  • 1

    In short, it is a list of nodes (whether they are elements, texts or even comments), the same as a common array, the difference is in NodeList.prototype and Array.prototype, the utility is that it is a special array for a specific function, but you will hardly create one of them directly

  • 1

    Giving a common example of point 3 cannot use map in a NodeList while an array can. Something like document.querySelectorAll("li").map(x => x.textContent) to obtain an array of texts from the various <li> does not work because it is not an array.

2 answers

10


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 possess:

  • A method item who gets an argument index numeric and returns an element Node;
  • An attribute length numerical;
  • It is an endless 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 node tree. The class NodeList represents a set of these nodes, being returned, for example, by the functions document.querySelectorAll or the attribute element.childNodes.

You can access one of the list elements through the method item 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 a array, does not have equivalences. One is a collection of us, another is a... array. The NodeList, for example, it will always represent a collection of items of the Node, ordered 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. Already a 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:

8

What is a nodeList object in Javascript?

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

How can I access elements from a nodeList?

Like any data collection, access each node through an index to the element you want. One of the most common ways to do this is with a for.

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

Almost all of a array works in it, but it’s a collection with another structure. And it does not provide access in dictionary form, so you cannot access 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

I put in the Github for future reference.

It is possible to convert it to a Array and access it this way. The array is static, or the data does not change. The nodeLIst is alive, so because it is a direct reference to the GIFT, as the GIFT is modified by the page the content found there is reflected in these changes of the GIFT. Not all iterations with a variable that has a nodeList will be equal.

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

A array all positions in sequence

What is its use?

It stores a collection of DOM elements selected by one of the functions of the browser selecting what you want. There you can do various 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 doesn’t have to be moving, it could just be checking. What you can do individually with an element in this case can do generally.

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

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.