NodeList set and Array

First, let's take a look at what is NodeList. NodeList and arguments are not common arrays. They have some basic attributes of arrays, but they are not completely arrays. The definitions found in Mozilla are as follows:

This is a commonly used type which is a collection of nodes returned by getElementsByTagName, getElementsByTagNameNS, and Node. childNodes. the list is live, so changes to it internally or externally will cause the items they reference to be updated as well. unlike NamedNodeMap, NodeList maintains a special order (document order ). the nodes in a NodeList are indexed starting with zero, similarly to JavaScript arrays, but a NodeList is not an array.

Literally, NodeList is a collection obtained by DOM operations (such as getElementsByTagName). It is a collection rather than a common array, but they have some attributes of an array, such as length and subscript indexes, however, they also have their own attributes, such as item. The biggest feature of NodeList is timeliness (live ).

Timeliness of NodeList
Let's look at the following code:

<Ul id = "nodelist">
<Li class = "lis"> index0 </li>
<Li class = "lis"> index1 </li>
<Li class = "lis"> index2 </li>
<Li class = "lis"> index3 </li>
<Li class = "lis"> index4 </li>
</Ul>
The javascript code is as follows:

Var myUl = document. getElementById ('nodelist ');
Var lis = myUl. getElementsByTagName ('lil ');
Lis Is A NodeList set with timeliness. The so-called Timeliness means that we will reflect the lis while modifying li, which is different from array, for example, if we insert the first li into the bottom of ul, the lis will also change accordingly:

// Insert the first li into the bottom of ul
MyUl. appendChild (myUl. getElementsByTagName ('lil'). item (0 ));
Console. log (lis [0]); // outputs the second li of the original ul
Therefore, we should pay attention to the timeliness of NodeList when writing code, otherwise we will make some mistakes,
For example, the following code (from Jeff Wong ):

<Div id = "divAnchor">
<A href = "http://www.js8.in"> link test </a>
</Div> var anchors = document. getElementsByTagName ("");
For (I = 0; I <anchors. length; I ++ ){
Var ele = document. createElement ("");
Ele. setAttribute ("href", "http://js8.in /");
Ele. appendChild (document. createTextNode ("new link test "));
Document. getElementById ("divAnchor"). appendChild (ele); // Add a new link to the div.
}
It is intended to append an a element to an existing a element in the div. However, you can run it. Is the browser crash gone? Lou pig crashes IE directly. FF prompts that the script is busy and whether to stop running. After you click "stop", n a links are generated on the page. This is because the length of NodeList will keep changing and rising, and the cycle will be recycled, and finally it will become an endless loop.

Convert NodeList to array
NodeList has the attribute features of the length and subscript indexes of these arrays. However, we cannot use native methods of arrays such as push, pop, shift, and unshift, in this way, we cannot use the native method of the array to operate NodeList. Therefore, we need to convert NodeList into an array for convenient operation. The following code converts NodeList to a normal array.

Function collectionToArray (collection ){
Var ary = [];
For (var I = 0, len = collection. length; I <len; I ++ ){
Ary. push (collection [I]);
}
Return ary;
}