Understanding a NodeList object and its relatives, NamedNodeMap and HTMLCollection, is critical to a good understanding of the DOM as a while. Each of those collections is considered "live", which is to say that they are updated when the document structure changes such that they are always current with the most accurate information. In reality, all NodeList objects are queries that are run against the DOM document whenever they are accessed. For instance, the following results in an infinite loop:
1 var divs = document.getElementsByTagName("div"),
2 i,
3 div;
4
5 for (i=0; i<div.length; i++){
6 div = document.createElement("div");
7 document.body.appendChild(div);
8 }
The first part of this code gets an HTMLCollection of all <div> elements in the document. Since that collection is "live", any time a new <div> element is added to the page, it gets added into the collection. Since the browser doesn‘t want to keep a list of all the collections that were created, the collection is updated only when it is accessed again. This creates an interesting problem in terms of a loop such as the one in this example. Each tiem through the loop, the condition i<divs.length is being evaluated. That means the query to get all <div> elements is being run. Because the body of the loop creates a new <div> element and adds it to the document, the value of divs.length increments each time through the loop;
Any time you want to iterate over a NodeList, it‘s best to initialize a second variable with the length and then compare the iterator to that variable, as shown in the following example:
1 var divs = document.getElementsByTagName("div"),
2 i,
3 len,
4 div;
5
6 for (i=0, len=divs.length; i<len; i++){
7 div = document.createElement("div");
8 document.body.appendChild(div);
9 }
Generally speaking, it is best to limit the number of times you interact with a NodeList. Since a query is run against the document each time, try to cache frequently used values retrieved from a NodeList.