• 技术文章 >web前端 >前端问答

    nodelist是什么意思

    长期闲置长期闲置2022-07-04 16:56:30原创201

    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方法。

    推荐学习:《nodejs视频教程

    以上就是nodelist是什么意思的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:node
    上一篇:node.js是服务器语言吗 下一篇:es模块能在node中执行吗
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• nodejs中require怎么用• nodejs中什么是模块化• nodejs中await怎么用• nodejs中archiver怎么用• 详解如何使用Node.js开发一个简单图片爬取功能
    1/1

    PHP中文网