What does nodelist mean?

nodelist means node list. It is an object in JavaScript. It is an array-like object used to save a set of ordered nodes; the nodelist object is similar to the HTMLCollection object, and the elements in the object can be passed index to access.

The operating environment of this article: Windows 10 system, nodejs version 12.19.0, Dell G3 computer.

What does nodelist mean

NodeList is an object in JavaScript, an array-like object used to save a set of ordered nodes

NodeList object

The NodeList object is a node list (collection) obtained from the document.

NodeList object is similar to HTMLCollection object.

Methods in some older browsers (such as getElementsByClassName()) return NodeList objects instead of HTMLCollection objects.

The childNodes property of all browsers returns a NodeList object.

querySelectorAll() of most browsers returns a NodeList object.

Elements in NodeList can be accessed by index (starting at 0).

The node list can keep itself updated. If an element is deleted or added to the node list or XML document, the list is automatically updated.

Note: In a node list, nodes are returned in the same order as they are specified in the XML document.

NodeList object property

length returns the number of nodes in the node list.

NodeList object method

item() returns the node with the specified index number in the node list.

Examples are as follows:

Instance 1:

var parent = document.getElementById('parent');
parent.childNodes.length // 2
parent.appendChild(document.createElement('div'));
parent.childNodes.length // 3

NodeList instance object may be a dynamic collection or a static collection. The so-called dynamic collection is a living collection. If the DOM tree deletes or adds a related node, it will be immediately reflected in the NodeList interface.

In the above code, parent.childNodes returns a NodeList instance object. When the parent node adds a child node, the number of members of the object increases by 1. Node.childNodes returns a dynamic collection.

The document.querySelectorAll method returns a static collection. Changes within the DOM will not be reflected in the return result of this method in real time.

The NodeList interface instance object provides the length attribute and numeric index, so you can use the numeric index to retrieve each node like an array, but it is not an array itself and cannot use array-specific methods such as pop or push. [

Example 2:

//HTML部分代码
//<ul><li>one</li><li>two</li><li>three</li></ul>
//JAVASCRIPT代码
var myNodeList = document.querySelector(&#39;ul&#39;).childNodes;
for(var i=0;i<myNodeList.length;i++){
    console.log(myNodeList[i]);
}
/* <li>one</li>
<li>two</li>
<li>three</li>
*/
console.log(myNodeList.length);// 3
console.log(myNodeList.item(1));//<li>two</li>

In the above code, the numeric index part of myNodeList is traversed through the for loop, and the members corresponding to the 3 indexes are returned, and the length attribute of 3 is correctly returned. .

The second member of the myNodeList instance object is accessed through the item() method. Since numeric indexes start counting from zero, to retrieve the second member, use numeric index 1.

All array-like objects can use the square bracket operator to remove members, so generally, the NodeList[index] method is used instead of the item method.

Recommended learning: "nodejs video tutorial"

The above is the detailed content of What does nodelist mean?. For more information, please follow other related articles on the PHP Chinese website!