The difference between javascript--static nodelist and dynamic NodeList

Yesterday saw a queryselectorall () thing, found that the use of similar to the Getelementsby series, they want to delve into the differences between them, the following is the information found.

PS: The reason to understand this knowledge point

Two days ago, when I reread the JS Dom programming, I saw the chapter on getting the DOM elements, and then I saw getElementsByTagName () and Getelementsbyclassname (), and then I learned about a new Dom api– the modern browser. Queryselectorall (). In my character, after seeing these methods I definitely want to understand their differences, so I read the data, I saw the stackoverflow above a problem

var temp = Document.queryselectorall (". Class");
For (var i=0, max=temp.length; i<max; i++) { 
    temp[i].classname = "New_class";
}

var temp = Document.getelementsbyclassname ("class");
For (var i=0, max=temp.length; i<max; i++) { 
    temp[i].classname = "New_class";
} 

Run these two pieces of code, if you get the length of the temp is 3, then the first piece of code can be three elements of the classname all changed to New_class ", and the second code can only speak the first element and the third element of the classname change to" New_class " The reason for this is the difference between dynamic nodelist and static nodelist. Then I flip through the data to find out what is dynamic nodelist and what is static nodelist. So, there's the following tirade. Talk about nodelist,htmlcollection and NamedNodeMap .

In different versions of browsers, if you call a DOM method that gets multiple elements (getelement ...). (), some will get NodeList (many old browsers), and some will get htmlcollection (many for the new browser). The method of using node interface, such as ChildNodes, is usually nodelist, while other interface methods may be htmlcollection. and NamedNodeMap and the previous two return the type of things is not the same, so it is necessary to understand the difference between the three.

1. The same point of the three

1.1 All have the length attribute

1.2 All have the item () method

1.3 Three sets are "dynamic", and if the elements in NodeList and htmlcollection are directly reflected in the DOM, the overhead is very high if you perform DOM operations directly in the collection at once. (This will be explained in detail when explaining the dynamics)

2. Different points of the three

2.1 NodeList contains all the node types, such as element nodes, text nodes, etc.

2.2 Htmlcollection contains only ELEMENT nodes

<div>
    <!--Comment-->
    <p>this is Some text</p>
</div>

The above code, if returned as NodeList, then the browser will give this list 5 elements

1. A break between <div> and notes and a space (or tab) as text node (yes, a blank symbol between tags can also be resolved to text node

2. Note as comment node

3. Break between Notes and <p> and spaces (or tab) as text node,p as Element

Break and space (or tab) between 4.</p> and </div> as text node

But if it is returned as a htmlcollection, then a <p> element is so simple

2.3 NamedNodeMap contains a collection of attributes, such as Id,title,name, in which each element of the collection is a attr type.

2.4 Three sets provide a different method, such as Nameditem () provided in Htmlcollection, while the other two sets do not provide this method

Extension points:

The item and Nameditem can be invoked via the abbreviation of [], and some browsers also support the use of () abbreviations (that is, can be list[index],list[key] or list (index), list (key), and directly with Dot Notation call Nameditem (such as List.key)

IE8 and the following version of the browser, the annotation belongs to Htmlcommentelement, count as element, so it will appear in htmlcollection

We can use Alert/console.log (document.getelement ...) Print out to see what type of collection returned, the following link in the detailed, you can refer to the following: http://www.jb51.net/article/25747.htm

PS: The above Knowledge point reference link:

http://www.cnblogs.com/joyeecheung/p/4067927.html,http://stackoverflow.com/questions/15763358/ Difference-between-htmlcollection-nodelists-and-arrays-of-objects, http://stackoverflow.com/questions/26047844/ Getelementsbyclassname-vs-queryselectorall said so much, so what is dynamic nodelist? What is static nodelist? What is the difference between them. Dynamic NodeList

Above we talked about nodelist,htmlcollection and NamedNodeMap are dynamic. In other words, changes to the underlying document structure are dynamically reflected in the associated nodelist,htmlcollection and NamedNodeMap. For example, if you first get the dynamic collection NodeList object of a child element of an element, and then manipulate the element elsewhere (add, modify, delete child elements, and so on), these changes are automatically reflected in the nodelist and do not need to be manually manipulated.

Because getElementsByTagName (all getelement ...). method returns a dynamic set, so whenever the document changes, the corresponding element is automatically updated. \ nodelist Therefore, the following code is a dead loop:

var divs = document.getelementsbytagname ("div");
var i=0;
while (I < divs.length) {
  document.body.appendChild (document.createelement ("div"));
  i++;
}

The reason for the dead loop is that each loop recalculates the divs.length. A new <div> is added to each iteration, so each time i++, The corresponding Divs.length is also increasing, so I will always be smaller than divs.length, and the cyclic termination condition will never be triggered.

The solution to the above code dead loop can be to store divs.length with a variable or to switch to Queryselectorall ():

var divs = document.getelementsbytagname ("div");
var i=0,len = divs.length;
while (I < len) {
    document.body.appendChild (document.createelement ("div"));
    i++;
}

You may find this dynamic set to be a bad idea, but a dynamic set can ensure that some objects that are used very commonly are the same in all situations, and that dynamic nodelist is much faster than static nodelist (explain why) static nodelist

The Queryselectorall () and Queryselector () methods return a static nodelist, A static nodelist is a change to the underlying document that does not affect the returned NodeList object. The returned nodelist is only a snapshot of the document state when the Queryselectorall () method is invoked. So the following code is not a dead loop:

var divs = Document.queryselectorall ("div");
var i=0;
while (I < divs.length) {
    Document.body.appendChild (document