What are NodeLists, and how do they work?

Did you know that JavaScript does not classify a selection of multiple elements as an array? Instead, it is called a. is called NodeList, A node list is essentially a list of elements. to generate NodeListWe can do something like this:

let myNodeList = document.querySelectorAll('p');
enter fullscreen mode

exit fullscreen mode

The above code converts the list of all paragraphs found on a page to a . will return as NodeList,

Node lists are interesting because they are not arrays, so they do not inherit all the distinct functions of arrays. A notable example is that, in some older browsers, such as Internet Explorer, NodeLists is not inherited forEach Celebration.

For example, if you want to add an event listener to each paragraph, the following code will generate an error in Internet Explorer:

let myNodeList = document.querySelectorAll('p');

myNodeList.forEach(function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});
enter fullscreen mode

exit fullscreen mode

Since it works in most modern browsers, you usually don’t have to worry about using it, but if you want to support older browsers and use it forEachWe need to throw our NodeList into an array, like this:

To convert our NodeList into a more manageable array, we can use the following code:

let myNodeList = document.querySelectorAll('p');
Array.prototype.forEach.call(myNodeList, function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});
enter fullscreen mode

exit fullscreen mode

A bit complicated, but now we can make sure that all of our users can access the event listeners we add to our NodeList items.

What functions does NodeLists support?

Since this article has so far focused on how NodeListhasn’t always been forEach By default, you might be wondering what functions can be run on a NodeList. 4 are:

  • NodeList.entries – Returns an iterator to get both the id and the element as an id/element pair, i.e. [ 1, p ],
  • NodeList.forEach – To iterate through each item individually.
  • NodeList.item – to get a specific item by id, i.e. get the first paragraph NodeList.item(0),
  • NodeList.keys – Returns an iterator to get the key, i.e. 1 2 3 4 5 …
  • NodeList.values – Returns an iterator to get the HTML element, i.e. p p p p ,

It is worth noting that NodeList.item Is the only function supported by Internet Explorer. The rest are not.

As an example, here’s how we would run these tasks on our NodeList :

NodeList.entries

let myNodeList = document.querySelectorAll('p');

// entries
let allEntries = myNodeList.entries();
for(var i of allEntries) {
    // Console logs each paragraph with an id individually, such as [ 0, p ] [ 1, p ] [ 2, p ] ...
    console.log(i);
}
enter fullscreen mode

exit fullscreen mode

NodeList.forEach

let myNodeList = document.querySelectorAll('p');

// forEach - iterate over each item
myNodeList.forEach(function(item) {
    // Console logs each paragraph element individually
    console.log(i);
});
enter fullscreen mode

exit fullscreen mode

NodeList.item

let myNodeList = document.querySelectorAll('p');

// item - get the first element (0)
let firstElement = myNodeList.item(0);
// Console logs the first element only
console.log(firstElement);
enter fullscreen mode

exit fullscreen mode

NodeList.keys

let myNodeList = document.querySelectorAll('p');

let getKeys = myNodeList.keys();
// Console logs the id of each element, i.e. 1 2 3 4 5 ...
for(var i of getKeys) {
    console.log(i);
}
enter fullscreen mode

exit fullscreen mode

NodeList.values

let myNodeList = document.querySelectorAll('p');

let getValues = myNodeList.values();
// Console logs each HTML element as an array, i.e. p p p p ...

for(var i of getValues) {
    console.log(i);
}
enter fullscreen mode

exit fullscreen mode

Leave a Comment