\
Did you know that Javascript does not class a selection of multiple elements as an array? Instead, it is something called a `NodeList`. A node list is essentially a list of elements. To generate a `NodeList`, we can do something like this: 

\
```javascript
let myNodeList = document.querySelectorAll('p');
```

\
The above code will return a list of all paragraphs found on a page as a `NodeList`.

\
Node lists are interesting because they aren't arrays, so they do not inherit all of the different functions that arrays have. One notable example is that, in some older browsers, such as Internet Explorer, `NodeList`s do not inherit the `forEach` function.

\
As such, if you wanted to add an event listener to every paragraph, the following code would throw an error in Internet Explorer:

\
```javascript
let myNodeList = document.querySelectorAll('p');

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

\
Since this works in most modern browsers, you usually don't have to worry about using this, but if you want to support older browsers and use `forEach`, we have to throw our NodeList into an array, like so:

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

\
```javascript
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..
});
```

\
A little complicated, but now we can ensure all our users can access the event listeners we add to our NodeList items.

## What functions do NodeLists support?

Since this article has focused so far on how `NodeList`s haven't always had `forEach` by default, you may be wondering what functions can be run on a NodeList. There are 4:

\
* `NodeList.entries` - returns an iterator for getting both the id and element as an id/element pair, i.e. `[ 1, p ]`.
* `NodeList.forEach` - for iterating through each item individually.
* `NodeList.item` - for getting a specific item by id, i.e. get the first paragraph by `NodeList.item(0)`.
* `NodeList.keys` - returns an iterator for getting keys, i.e. 1 2 3 4 5 ...
* `NodeList.values` - returns an iterator for getting the HTML elements, i.e. `p p p p` ...

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

\
As an example, here is how we would run these functions on our NodeList:

### NodeList.entries

```javascript
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);
}
```

### NodeList.forEach

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

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

### NodeList.item

```javascript
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);
```

### NodeList.keys

```javascript
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);
}
```

### NodeList.values

```javascript
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);
}
```


---

Also Published [Here](https://fjolt.com/article/javascript-foreach-on-queryselectorall)

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

A Quick Look at NodeLists and How They Work

Too Long; Didn't Read

@smpnjn

Credibility

RELATED STORIES