The difference between queryselector () and Queryselectorall () and the difference between nodelist and Htmlcollection objects

querySelector()。 This method can be called by the Document or element type.

When a method is called with the document type, a matching element is found within the scope of the querySelector() documentation element, and when the method is called with the element type querySelector() , only the matching elements are found in the descendant elements of the elements. If no matching elements exist, both types return NULL when the method is called.

querySelectorAll()。 This method can be called by the Document, DocumentFragment, and element types.

querySelectorAll()Non-real-time NodeList object returned by method

When a method is called with element type, only the descendants of the element are searched for the querySelectorAll() matching element object

If no matching object exists, both types of document and element return an empty NodeList object when the method is called

Both Etelementsbyname () and getElementsByTagName () return NodeList objects, and properties like Document.images and Document.forms are htmlcollection objects.

These objects are read-only class array objects. They have the length property, or they can be indexed like a real array (just read rather than write). You can iterate over the contents of a nodelist or htmlcollection by using a standard loop:

You cannot call the array method directly on the nodelist and Htmlcollection collections, but you can use it indirectly:

var Content=array.prototype.map.call (document.getElementsByTagName ("P"), function (e) {return e.innerhtml;});

　　

Htmlcollection objects also have additional named properties, which can also be indexed by numbers and strings.

For historical reasons, nodelist and Htmlcollection objects can also be used as functions: calling them as arguments in numbers or strings is like using numbers or strings to index them. The use of this weird way is discouraged.

Neither the nodelist nor the Htmlcollection interfaces are designed for dynamic languages like JavaScript, they all define the item () method, expect to enter an integer, and return the element at this index. In JS there is no need to call this method, because simple use of array index can be substituted. Similarly, Htmlcollection defines the Nameditem () method, which returns the value of the specified property name, but can be accessed using an array index or regular property in JS.

The NodeList and Htmlcollection objects are not a static snapshot of the state of the historical document, but are usually real-time, and the list of elements they contain can change as the document changes, which is one of the most important and surprising features. Suppose you call getElementsByTagName (' div ') in a document that does not have a <div> element, and the return value is a NodeList object with a length of 0. If you then insert a new <div> element into the document, this element will automatically become a member of the nodelist, and its length property becomes 1.

In general, the real-time nature of nodelist and htmlcollection is very useful. However, if you want to add or remove elements from a document when iterating over an NodeList object, you first need to generate a static copy of the NodeList object:

var snapshot=array.prototype.slice.call (nodelist,0);

　　

The difference between queryselector () and Queryselectorall () and the difference between nodelist and Htmlcollection objects