The difference between a nodelist set and an array

First look at what is nodelist,nodelist and arguments are not normal arrays, they have some basic properties of the array but not exactly an array. Here is the definition found on Mozilla:

This is a commonly used type which be a collection of nodes returned by getElementsByTagName, Getelementsbytagnamens, a D node.childnodes. The list is live and so changes to it internally or externally'll cause the items they reference to be updated as. Unlike NamedNodeMap, NodeList maintains a particular order (document order). The nodes in a nodelist are indexed starting with zero, similarly to JavaScript arrays, but a nodelist be not ' an array .

By literal means NodeList is a collection of DOM operations (getElementsByTagName, etc.), a collection rather than an ordinary array, but they have some attributes of the array, such as length, subscript index, but they also have their own attributes, such as item, In addition nodelist the biggest characteristic is the timeliness (live).

the 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>

var Myul = document.getElementById (' nodelist ');

var lis = myul.getelementsbytagname (' li ');

Lis is a nodelist set, with timeliness, the so-called timeliness is that we modify Li at the same time, will be reflected in the LIS, which is different from the array, for example, we put the first li into the bottom of the UL, then the LIS will also occur corresponding changes:

Put the first Li into the bottom of the UL

Myul.appendchild (myul.getelementsbytagname (' Li '). Item (0));

Console.log (Lis[0]);//output is the second Li of the original UL

NodeList converted to arrays

NodeList have length, subscript index The attribute characteristics of these arrays, but we can not use the array of push, pop, shift, unshift, such as the original method of array, so we can not use the primitive method of the array to manipulate the nodelist, So we're going to do it. NodeList is converted to an array for easy operation. The following code converts the nodelist into a normal array.

function Collectiontoarray (collection) {

var ary = [];

For (var i=0, len = Collection.length i < len; i++) {

Ary.push (Collection[i]);

}

return ary;

}