js中删除节点的问题

发布网友发布时间：2022-04-22 16:15

共2个回答

热心网友时间：2022-04-22 11:24

其实是DOM元素集的差别，即HTMLCollection和NodeList的差别。

看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div">
    <p id="pid">div的p元素</p>
    <h1 id="hid">div的h1元素</h1>
</div>
<script>
    function removeNode() {
        var div=document.getElementById("div");
        console.log(div.children,div.childNodes);
    }
    removeNode();
</script>
</body>
</html>

运行结果：

他们两个的差异你可以去查文档，但是可以明显的看出children返回的只有html元素，所以我建议在做删除操作的时候尽量使用children来返回HTMLCollection对象。

热心网友时间：2022-04-22 12:42

你没有操作对。div.childNodes.length；//5

div.childNodes[3];//才能选到 h1 元素标签

div.removeChild(div.childNodes[3]);

加入想用div.childNodes[1]选中h1的话，html中的div需要如下写，不要有换行，才可以

html中:<div id="div"><p id="pid">div的p元素 </p><h1 id="hid">div的h1元素</h1></div>

JS中： alert(div.childNodes.length);//此时长度是2

div.removeChild(div.childNodes[1]);//这样才可以删除 h1元素

追问我基本明白了，也就是说换行会占用一个节点，删掉这个节点不会有任何反应，那么我想问一下您我最开始的这种写法，五个节点是怎么数出来的，您能详细列举一下么，包括换行