HTML HTMLCollection vs NodeList: DOM Collection Behavior

A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore htmlcollection vs nodelist: dom collection behavior using a short example that you can inspect and change.

The Idea in Plain English

HTMLCollection and NodeList are both DOM collections, but they are not always live in the same way. For example getElementsByTagName normally returns a live HTMLCollection while querySelectorAll returns a static NodeList.

HTML supplies the structure; JavaScript supplies the behavior described here. If you remove the script, check what remains usable for visitors.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<ul id="animals">
    <li>Cat</li>
    <li>Dog</li>
</ul>
<script>
    const animalsList = document.querySelector("#animals");
    const currentItems = animalsList.querySelectorAll("li");
    animalsList.insertAdjacentHTML("beforeend", "<li>Bird</li>");
    console.log(currentItems.length); // Still 2
</script>

What Each Part Does

A ul is an unordered list of related items.
An li is a single list item.
The script element can load code or hold data; the type attribute tells the browser how to treat its contents.
id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.

A live collection changes when matching elements are added to the document; a static NodeList does not automatically gain them.

Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.

Try It Yourself

Try this next: compare live children with querySelectorAll results. Then inspect the page and explain what changed.

Common Beginner Mistakes

Assuming the two interfaces behave identically when editing the DOM in a loop.
Changing several parts of the example at once, making it difficult to see which part caused a different result.
Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

HTMLCollection and NodeList are both DOM collections, but they are not always live in the same way. For example getElementsByTagName normally returns a live HTMLCollection while querySelectorAll returns a static NodeList.
A live collection changes when matching elements are added to the document; a static NodeList does not automatically gain them.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.