Dom-nodelist Understanding

In the console typeof NodeList

The result of the execution is: function, and the results are entered in the console nodelist, the effect is as follows:

found that in addition to function inside nothing, so directly new nodelist, the effect is as follows:

Results will be an error, check the relevant introduction of nodelist, found that NodeList is one of the interface of the DOM, the following for you introduce nodelist

<p class= "x1" name= "xx" >player 1:chris</p>

NodeList interface is one of the four basic interfaces of the DOM object Model (Document, Node, NodeList, NamedNodeMap)
The Nodelistjie interface is a collection of nodes that contains all the child nodes of a node, although it has some properties of the array but is not an array (each item in the nodelist can be accessed by a single lead, which starts at 0. )
NodeList is very similar in some ways and arrays, can it directly use inherited methods on Array.prototype?

<script type= "Text/javascript" >

var ma=document.queryselectorall ("P.x1");

Console.log (MA);

</script >

Looking at the results of the above, we can find NodeList's prototype chain: Mynodelist---nodelist.prototype----object.prototype--NULL, Does not inherit Array.prototype, and all does not directly use the method on Array.prototype

Dynamic nodelist: Changes to the underlying document structure are dynamically reflected in the nodelist, and then manipulated in other places (add, delete, sub-elements, etc.), which automatically reflect into the nodelist without manual action.
All the getelement. method returns the dynamic NodeList collection, so once the document changes, the nodelist automatically updates the corresponding element to see the following example:

<script type= "Text/javascript" >

var p = document.getelementsbytagname ("P");
var i = 0;
while (I<p.length) {
Document.body.appendChild (Document.createelement ("P"));
i++;
alert (i);
}

</script >

Running the above section of code, we execute it out into a dead loop, which is why le.
Cause: Each cycle will recalculate p.length, each iteration will add a new P-label so each i++,p.length length is also increasing, so I is always less than p.length, so the condition of terminating the loop will never trigger

Static nodelist: Changes to the underlying document do not affect the returned NodeList object, and the Queryselectorall and Queryselector methods return a static nodelist

<script type= "Text/javascript" >
var p = document.queryselectorall ("P");
var i=0;
while (I < p.length) {
Document.body.appendChild (Document.createelement ("P"));
i++;
alert (i);
}

</script>

Executing the above example, it is found that execution does not fall into a dead loop like the one above, which is why le.
We already know that Queryselectorall is returning a static nodelist, when the nodelist returned is just a snapshot of the state of the document when the method is called. In this case, the value of the p.length will never change, as long as the condition is not met and the loop is terminated directly
Why dynamic nodelist is faster than static nodelist.
Summary reason:

1. The creation method is completely different (dynamic nodelist does not need to obtain all the information beforehand, while the static nodelist need to obtain and encapsulate all relevant data from the beginning)

2. Dynamic nodelist is created by registering its presence in the cache buffer. Each access must query the document for changes, while the static NodeList object instance is created by another file and then loops through all the data.