Prev Next

DOM Node Lists

A NodeList is a collection of DOM nodes returned by methods like querySelectorAll. Unlike DOM collections, NodeLists can be static or live, depending on how they are created.

Key Topics

Static vs. Live NodeLists

NodeLists created using querySelectorAll are static, meaning they do not reflect changes in the DOM. NodeLists from childNodes are live and update automatically.

const staticList = document.querySelectorAll("p");
const liveList = document.getElementById("container").childNodes;
console.log("Static List Length:", staticList.length);
console.log("Live List Length:", liveList.length);

Output

> Static List Length: 3

> Live List Length: 5

Explanation: The static NodeList from querySelectorAll does not update if the DOM changes, whereas the live NodeList from childNodes reflects real-time updates.

Iterating Through NodeLists

You can iterate over a NodeList using forEach (supported in modern browsers) or loops like for or for...of.

const items = document.querySelectorAll(".item");
items.forEach((item, index) => {
    console.log(`Item ${index + 1}:`, item.textContent);
});

Output

> Item 1: First Item

> Item 2: Second Item

> Item 3: Third Item

Explanation: The forEach method iterates over each item in the NodeList, logging its text content.

Converting NodeLists to Arrays

Convert a NodeList to an array using Array.from or the spread operator for advanced array operations.

const nodelist = document.querySelectorAll(".item");
const array = Array.from(nodelist);
const texts = array.map(item => item.textContent);
console.log("Array of Texts:", texts);

Output

> Array of Texts: ["First Item", "Second Item", "Third Item"]

Explanation: The NodeList is converted to an array using Array.from, enabling advanced operations like mapping the text content of each item.

JavaScript Usage in DOM

Below is a complete DOM example demonstrating the creation, iteration, and manipulation of NodeLists.

<!DOCTYPE html>
<html>
    <head>
        <title>DOM NodeLists Example</title>
    </head>
    <body>
        <div id="container">
            <p class="item">First Item</p>
            <p class="item">Second Item</p>
            <p class="item">Third Item</p>
        </div>
        <script>
            const staticList = document.querySelectorAll(".item");
            console.log("Static NodeList Length:", staticList.length);

            const liveList = document.getElementById("container").childNodes;
            console.log("Live NodeList Length:", liveList.length);

            const newItem = document.createElement("p");
            newItem.textContent = "Fourth Item";
            document.getElementById("container").appendChild(newItem);

            console.log("Updated Static NodeList Length:", staticList.length);
            console.log("Updated Live NodeList Length:", liveList.length);
        </script>
    </body>
</html>

Key Takeaways

  • Static vs Live: Static NodeLists do not update with DOM changes, while live NodeLists do.
  • Iteration: NodeLists can be iterated using forEach or converted to arrays.
  • Conversion: Use Array.from or the spread operator to convert NodeLists to arrays.
  • Dynamic Updates: Live NodeLists automatically reflect changes in the DOM.
Prev Next