Javascript removeChild（）只删除偶数个节点？

我正在尝试在ID=“prnt”的DIV下动态添加children DIV。添加节点可以正常工作，没有问题。然而奇怪的是，当涉及到已删除的节点时，它只删除了包括0在内的偶数节点。为什么呢，我可能是个蠢货，但它看起来更像一只虫子。我可能大错特错了

函数displayNodes（）
{
var prnt=document.getElementById（“prnt”）；
var chlds=prnt.childNodes；
var cont=document.getElementById（“内容”）；
对于（i=0；i”；
cont.innerHTML++=“节点#”+（i+1）；
cont.innerHTML+=“
”；
cont.innerHTML+=chlds[i].nodeName；
cont.innerHTML+=“
”；
}
}
}
函数deleteNodes（）
{
var prnt=document.getElementById（“prnt”）；
var chlds=prnt.childNodes；
对于（i=0；i




显示节点信息
删除父节点1下的所有元素节点
添加5个新的DIV节点

取消if（！（chlds[i].nodeType==3））节点类型检查

通过执行.querySelectorAll（'div'）只能提取div

函数deleteNodes（）
{
var chlds=document.getElementById（“prnt”）.querySelectorAll（“div”）；问题是在循环遍历集合时正在修改它。反向迭代应该可以解决此问题

for(i = chlds.length-1; i >= 0; i--)
{
    if(!(chlds[i].nodeType == 3))
    {
         prnt.removeChild(chlds[i]);
    }
}

问题是，在删除节点时（从一开始），剩余子节点的索引每次减少一个：

给5个孩子：

Child1 Index0
Child2 Index1
Child3 Index2
Child4 Index3
Child5 Index4

当你去移除它们时，这就是正在发生的事情

.removeChild(0) removes Child1
Child2 is now Index0
Child3 is now Index1
....

next Iteration:
.removeChild(1) removes Child3
Child2 is still Index0
Child4 is now Index1
Child5 is now Index2
....

解决方案。从最后一个索引中删除子项并移向0。
由
childNodes
返回的
NodeList
为“活动”-删除子项会立即更新列表

发生的情况是，您正在删除一个元素，这会将列表的长度减少1，从而导致循环跳过一个元素

避免这种情况的一种方法是将元素复制到
数组中

例如

var节点=[]；
对于（变量i=0；i
许多DOM方法（childNodes、getElementsByTagName等）返回的数组都是“活动”的：每当文档发生更改时，它们都会神奇地更新。这可能会导致像您遇到的那样的细微错误。
Child1 Index0
Child2 Index1
Child3 Index2
Child4 Index3
Child5 Index4

.removeChild(0) removes Child1
Child2 is now Index0
Child3 is now Index1
....

next Iteration:
.removeChild(1) removes Child3
Child2 is still Index0
Child4 is now Index1
Child5 is now Index2
....

var nodes = [];
for (var i = 0; i < chlds.length; i++) {
  nodes.push(chlds[i]);
}

for(i = 0; i < nodes.length; i++)
{
  if(!(nodes[i].nodeType == 3))
  {
    prnt.removeChild(nodes[i]);
  }
}