javascript - 关于DOM中Nodelist的问题
大家讲道理
大家讲道理 2017-07-05 10:55:43
0
3
733

问题:p的Nodelist[2][4]所示的文本节点是什么?属于谁?

    <p>this is p
        <h1 id="h1">this is H1</h1>
        <h2>this is H2</h2>
    </p>
    <script type="text/javascript">
        var p = document.getElementsByTagName("p")[0];
        var child_nodes = p.childNodes;
        var h1 = document.getElementsByTagName("h1")[0];

        for (var i=0;i<child_nodes.length;i++) {            // 遍历这个Nodelist,并写入document文档中
                document.write(child_nodes[i]+"<br />")
        }

获得p后,对p调用childNodes返回Nodelist集合并遍历它,得出图中的几个对象,[0]p自身文本节点,[1],[3]h1,h2元素节点,那其中的[2][4]的文本节点是什么?我当时以为是不是h1,h2的文本节点,毕竟childNodes是返回子节点的集合,但是代码推翻了我的想法。

问题:p的Nodelist[2][4]所示的文本节点是什么?属于谁?

    
        alert(child_nodes[0]===p.childNodes[0])                       // true p自身文本节点
        console.log(child_nodes[1]===h1)                                // true 子节点h1
        alert(child_nodes[1].childNodes===h1.childNodes)                // true h1的childNodes返回的集合相同,符合遍历出的元素

        alert(child_nodes[2].nodeValue===h1.childNodes[0].nodeValue)    // false 
        alert(child_nodes[2]===h1.childNodes[0])                        // false

想想也觉得不会是h1,h2的Nodelist,对p进行childNodes返回的Nodelist集合包括h1,h2,而h1,h2的文本节点是在自己的Nodelist里。

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!