NodeList
========

**`NodeList`** objects are collections of nodes, usually returned by properties such as `Node.childNodes` and methods such as `document.querySelectorAll()`.

**Note:** Although `NodeList` is not an `Array`, it is possible to iterate over it with `forEach()`. It can also be converted to a real `Array` using `Array.from()`.

Live vs. Static NodeLists
-------------------------

Although they are both considered `NodeList` objects, there are 2 varieties of NodeList: *live* and *static*.

### Live NodeLists

In some cases, the `NodeList` is *live*, which means that changes in the DOM automatically update the collection.

For example, `Node.childNodes` is live:


```js
const parent = document.getElementById("parent");
let childNodes = parent.childNodes;
console.log(childNodes.length); // let's assume "2"
parent.appendChild(document.createElement("div"));
console.log(childNodes.length); // outputs "3"
```

### Static NodeLists

In other cases, the `NodeList` is *static,* where any changes in the DOM do not affect the content of the collection. The ubiquitous `document.querySelectorAll()` method returns a *static* `NodeList`.

It's good to keep this distinction in mind when you choose how to iterate over the items in the `NodeList`, and whether you should cache the list's `length`.

Instance properties
-------------------

`NodeList.length` Read only 

The number of nodes in the `NodeList`.

Instance methods
----------------

`NodeList.item()`

Returns an item in the list by its index, or `null` if the index is out-of-bounds.

An alternative to accessing `nodeList[i]` (which instead returns `undefined` when `i` is out-of-bounds). This is mostly useful for non-JavaScript DOM implementations.

`NodeList.entries()`

Returns an `iterator`, allowing code to go through all key/value pairs contained in the collection. (In this case, the keys are integers starting from `0` and the values are nodes.)

`NodeList.forEach()`

Executes a provided function once per `NodeList` element, passing the element as an argument to the function.

`NodeList.keys()`

Returns an `iterator`, allowing code to go through all the keys of the key/value pairs contained in the collection. (In this case, the keys are integers starting from `0`.)

`NodeList.values()`

Returns an `iterator` allowing code to go through all values (nodes) of the key/value pairs contained in the collection.

Example
-------

It's possible to loop over the items in a `NodeList` using a for loop:


```js
for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}
```


**Don't use `for...in` to enumerate the items in `NodeList`s**, since they will *also* enumerate its `length` and `item` properties and cause errors if your script assumes it only has to deal with `element` objects. Also, `for...in` is not guaranteed to visit the properties in any particular order.

`for...of` loops loop over `NodeList` objects correctly:


```js
const list = document.querySelectorAll("input[type=checkbox]");
for (const checkbox of list) {
  checkbox.checked = true;
}
```


Browsers also support the iterator method (`forEach()`) as well as `entries()`, `values()`, and `keys()`.

Specifications
--------------

| Specification |
| --- |
| DOM Standard # interface-nodelist |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.