nodelist的概念是什么

这篇文章主要介绍“nodelist的概念是什么”，在日常操作中，相信很多人在nodelist的概念是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”nodelist的概念是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

nodelist是节点列表的意思，是JavaScript中的一个对象，是一种类数组对象，用于保存一组有序的节点；nodelist对象类似HTMLCollection对象，并且该对象中的元素可以通过索引来访问。

本文操作环境：Windows10系统、nodejs 12.19.0版、Dell G3电脑。

nodelist是什么意思

NodeList是JavaScript中的一个对象，是一种类数组对象，用于保存一组有序的节点

NodeList 对象

NodeList 对象是一个从文档中获取的节点列表 (集合) 。

NodeList 对象类似 HTMLCollection 对象。

一些旧版本浏览器中的方法(如：getElementsByClassName())返回的是 NodeList 对象，而不是 HTMLCollection 对象。

所有浏览器的 childNodes 属性返回的是 NodeList 对象。

大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

NodeList 中的元素可以通过索引(以 0 为起始位置)来访问。

节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。

注意：在一个节点列表中，节点被返回的顺序与它们在 XML 文档中被规定的顺序相同。

NodeList 对象属性

length 返回节点列表中的节点数量。

NodeList 对象方法

item()返回节点列表中指定索引号的节点。

示例如下：

实例1：

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

NodeList实例对象可能是动态集合，也可能是静态集合。所谓动态集合就是一个活的集合，DOM树删除或新增一个相关节点，都会立刻反映在NodeList接口之中。

上面代码中，parent.childNodes返回的是一个NodeList实例对象。当parent节点新增一个子节点以后，该对象的成员个数就增加了1。Node.childNodes返回的是一个动态集合。

document.querySelectorAll方法返回的是一个静态集合。DOM内部的变化，并不会实时反映在该方法的返回结果之中。

NodeList接口实例对象提供length属性和数字索引，因此可以像数组那样，使用数字索引取出每个节点，但是它本身并不是数组，不能使用pop或push之类数组特有的方法。 [

实例2：

//HTML部分代码
//<ul><li>one</li><li>two</li><li>three</li></ul>
//JAVASCRIPT代码
var myNodeList = document.querySelector('ul').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>

在上面代码中，通过for循环遍历了myNodeList的数字索引部分，返回了3个索引对应的成员，并且正确返回了length属性为3。

通过item()方法访问了myNodeList实例对象的第二个成员。由于数字索引从零开始计数，所以取出第二个成员，要使用数字索引1。

所有类似数组的对象，都可以使用方括号运算符取出成员，所以一般情况下，都是使用NodeList[index]方法，而不使用item方法。

到此，关于“nodelist的概念是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！