Dynamic vs static NodeList

Written byPhuoc Nguyen

#Static NodeLists

When you use methods like `document.querySelectorAll()`, a static `NodeList` is created. This `NodeList` represents a snapshot of the matching elements at the time the method was called.

For example, let's say we have an unordered list (`ul`) with three list items (`li`):

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

We're going to add a new item to the list by appending it.

const listItems = document.querySelectorAll('li');
console.log(listItems.length);  // 3

// Append a new item
const list = document.querySelector('ul');
const li = document.createElement('li');
li.innerHTML = 'D';
list.appendChild(li);

console.log(listItems.length);  // still 3

In the example above, we make a static `NodeList` containing all the `li` elements on the page. Then, we add a new `li` element to the `ul` element. However, even after the addition, the length of the `listItems` `NodeList` remains 3. This is because the `NodeList` is static and doesn't update when the DOM changes.

#Dynamic NodeLists

When you use the `element.childNodes` or `element.children` property, or call the `element.getElementsByTagName()` function, a dynamic `NodeList` is created. This type of `NodeList` reflects the current state of the DOM, and is updated whenever the DOM changes.

Let's take a look at an example using these different ways to select nodes.

const list = document.querySelector('ul');
const listItems = list.childNodes;
console.log(listItems.length);  // 3

// Append a new item
const li = document.createElement('li');
li.innerHTML = 'D';
list.appendChild(li);

console.log(listItems.length);  // now 4

In this example, we create a dynamic `NodeList` of all the child nodes of the `ul` element. Then, we append a new `li` element to the `ul` element. When we log the length of the `listItems` `NodeList` again, it returns 4. This is because the `NodeList` is dynamic and updates when the DOM changes.

You'll encounter the same thing when using the `getElementsByTagName()` function.

const list = document.querySelector('ul');
const listItems = list.getElementsByTagName('li');
console.log(listItems.length);  // 3

// Append a new item
const li = document.createElement('li');
li.innerHTML = 'D';
list.appendChild(li);

console.log(listItems.length);  // now 4

#When to use dynamic vs static NodeLists

When it comes to choosing between a dynamic or static `NodeList`, it really depends on your specific needs.

If you only need to work with a specific set of elements at a certain point in time (like when the page first loads), then a static `NodeList` is usually good enough. Plus, using a static `NodeList` is often faster since the browser doesn't have to keep track of changes to the DOM.

However, if you're working with elements that might change frequently (like if you're animating things on the page), then a dynamic `NodeList` is the way to go. This type of `NodeList` automatically updates as changes are made to the DOM, so you don't have to worry about updating it yourself. Just be aware that dynamic `NodeList`s can be slower than static ones, especially if the DOM is large.

#See also

Questions? 🙋

Do you have any questions? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn