Interactive online courses HTML Academy
2026-03-09 12:56 Diff
https://htmlacademy.org/courses/javascript-browser/dom/static-live-collection

We discovered a problem: the length of the items collection does not change when tasks are deleted from the list. Why does this happen?

querySelectorAll finds all of the desired elements once, records them, and does nothing more. This code is static, and the changes in DOM do not affect it whatsoever. We can say that querySelectorAll works like any other variable that we have written some value to. Until we redefine the variable, it will contain the value that we wrote to it, regardless of what happens in the code.

Therefore, this collection is called static.

However, in addition to static collections, we also have live collections of elements. They are also called dynamic. Dynamic collections react to changes in DOM. If one of the elements in the collection is deleted from DOM, then it will also disappear from the collection. These are several ways of obtaining a live collection. One of them is through the use of children. This method is called in the parent element, and it gathers together all of the child elements into a dynamic collection. The syntax is as follows:

parentElement.children;

Let’s explore how live collections work in practice. Change querySelectorAll to children in our code, and see how the program now works.

NodeList is output in the console together with the collection. What is it?

It is a type of collection. This type returns querySelectorAll along with a number of other methods. One particular feature of this collection is that it can be used to store not only DOM elements, such as li or div, but also line breaks and the text content of elements in the form of separate collection elements. A NodeList can be static or dynamic. It depends on the method that is used to call it. You can read more about these types of collections in the specification and on MDN.