The class array object in JS---NodeList

Dynamic NodeList

This is a large pit in the Document Object model (Dom,document object models). NodeListobjects (and objects in the HTML DOM HTMLCollection ) are a special type of object. The DOM Level 3 Spec specification HTMLCollection describes the object as follows:

The and objects in the DOM NodeList NamedNodeMap are dynamic (live); in other words, modifications to the underlying document structure are dynamically reflected in the relevant collections NodeList and NamedNodeMap in. For example, if you first get a Element dynamic collection object for a child element of an element () NodeList , and then add more child elements to the DOM parent element in order to add, modify, delete, and so on, the changes are automatically reflected NodeList , No additional calls need to be made manually. Similarly, modifications to a node on the DOM tree Node also affect the objects referenced by the node in real time NodeList NamedNodeMap .

getElementsByTagName()method returns a dynamic collection of elements that correspond to the tag name, and automatically updates the corresponding element as long as the document changes. Therefore, the following code is actually a dead loop:

 1  //  2   An appropriate intermediate variable is a good habit  3  var  divs = document.getElementsByTagName ("div"  4   5       While  (i < Divs.length) { 7  Document.body.appendChild (document.createelement ("div"  8  i++;  9 } 

The reason for the dead loop is that each cycle is recalculated divs.length . Each iteration adds a new one, <div> so each time i++ , the corresponding is divs.length also increasing, so i always divs.length smaller, the loop termination condition will not be triggered [exception is the DOM does not have Div, not Into the loop].

You might think this dynamic collection is a bad idea, but with dynamic collections you can guarantee that some very common objects are the same in all situations, such as, and document.images document.forms other similar pre-dom collections.

Static NodeList

querySelectorAll()The difference to the method is that it returns a static NodeList . This is the Selector API specification that represents:

querySelectorAll()The object returned by the method NodeList must be static, not dynamic ([Dom-level-3-core], section 1.1.1). Subsequent changes to the underlying document cannot affect the returned NodeList object. This means that the returned object will contain all the element nodes that match at the moment the list was created.

So even with querySelectorAll() getElementsByTagName() the same parameters and behaviors, they have very different points. In the former case, the return is a snapshot of the NodeList state of the document at the time the method is called, and the latter will always be updated according to the state of documents. The following code will not be a dead loop:

1 var divs = Document.queryselectorall ("div"),2     i=0; 3 4  while (I < divs.length) {5     document.body.appendChild ("Document.createelement (" div ")); 6     i++; 7 }

In this case there is no dead loop, divs.length the value never changes, so the loop is actually <div> increasing the number of elements by one times and then exiting the loop.

Why is dynamic NodeList faster?

Dynamic NodeList objects can be created and returned more quickly in the browser because they do not need to get all the information in advance, and static NodeList from the start requires all the relevant data to be acquired and encapsulated. To thoroughly understand this, WebKit's source code for each NodeList Types have a separate source file: DynamicNodeList.cpp and StaticNodeList.cpp. The two types of objects are created in a completely different way.

DynamicNodeListThe object is created by registering its presence in the cache buffer. In essence, creating a new one DynamicNodeList is very lightweight because there is no need to do any upfront work. Each time you visit DynamicNodeList , you must query the document for changes, the length property, and the item () method to prove it (the same is true for access using the brackets).

In contrast, StaticNodeList an object instance is created by another file and then loops through all the data. The upfront cost of performing a static query in document is significantly higher than it DynamicNodeList would have been in many times.

If you really look at the source of the WebKit, you will find that he querySelectorAll() explicitly creates a return object, in which a loop is used to fetch each result, and a final return is created NodeList .

Conclusion

getElementsByTagName()querySelectorAll()the root cause of speed ratio is the difference between dynamic nodelist and static NodeList objects. Although I can say with certainty that there is some way to optimize this, it is NodeList much faster to get a dynamic list of pre-processing operations than to get a static collection (which is done before returning). Which method is better for the main or to see your needs, if only to find the element according to tag name, and do not need to get this snapshot, then you should use the getElementsByTagName() method, if you need snapshot results (static), or need to use complex CSS query, you can consider querySelectorAll() .

* The above content is from the network *

The class array object in JS---NodeList