搜索

首页  >  问答  >  正文

javascript - 关于js中的childNodes[]

在学习DOM对象操作HTML时，看到removeChild是用于删除节点，想删除第一个p元素，childNodes[0]竟然没反应，要childNodes[1]才能删除第一个P元素，然后我在前面加了没有标签包裹的文字，再用childNodes[0]却又能删去了？意思是[0]只能用于删除没有标签的文本内容吗？还是怎样。。。求解。。
还有childNodes[3]也是没删去一个。。又是为啥。。

代码如下

<body>
<p id="p">
    这句话用于测试的
    <p id="pid">p的p1元素</p>
    <p>p的p2元素</p>
</p>
<script>
    function addNode(){
        var p=document.getElementById("p");
        var node=document.getElementById("pid");
        var newnode=document.createElement("p");
        newnode.innerHTML="动态添加p元素";
        p.insertBefore(newnode,node);//参数分别是要插入的新节点和它的相对位置
    }
     addNode();
    // 删除节点
    function removeNode(){
        var p=document.getElementById("p");
        var p=p.removeChild(p.childNodes[3]);
        //从1开始的childNodes[0]没反应
    }
    removeNode();
</script>
</body>

下面是结果显示。。
p.childNodes[0]的结果

动态添加p元素

p的p1元素

p的p2元素

p.childNodes[1]的结果

这句话用于测试的

p的p1元素

p的p2元素

p.childNodes[3]的结果

这句话用于测试的

动态添加p元素

p的p1元素

p的p2元素

p.childNodes[4]的结果

这句话用于测试的

动态添加p元素

p的p1元素
PHP中文网PHP中文网2836 天前211

全部回复(1)我来回复

  • 巴扎黑

    巴扎黑2017-04-10 17:30:40

    是这样的：childNodes是包括一个元素的所有直接子节点。

    比如：

    <p id="p">
    这句话用于测试的
    <p id="pid">p的p1元素</p>
    <p>p的p2元素</p>
</p>

    childNodes(0) 其实就是这句话用于测试的这个文本节点（注意：文本节点也包括不可见字符，例如回车和换行）。

    如果想获取所有元素节点，可以使用children，比如获取第一个元素节点children[0]，就能取到`<p id="pid">p的p1元素</p>
    `

    回复
    0
  • 取消回复