正确遍历节点 - javascript childNodes

Question

我正在尝试让以下代码对每个 child 节点工作一次。该函数还按照逻辑删除节点，对于多个 child 节点，它似乎永远不会遍历每个 child 节点。

//Deleting from child node
            var target =document.getElementById(element.name).childNodes[0];            
            if(target.hasChildNodes())
            {
              var children = new Array();
              children = target.childNodes;
              for(child in children)
              {
                if(children[child].tagName == 'DIV'){
                    //target.removeChild[child];
                    var deleteChild = document.getElementById(target.childNodes[child].id);
                    deleteChild.parentNode.removeChild(deleteChild);
                }
              }
            }

在特殊情况下，我有 4 个 "Div" 作为 child，这只会删除两个 DIV 而不是全部。我假设长度也在不断变化，因此无法到达所有 children.

这是正确的遍历方式吗，我是否遗漏了一些明显的东西？

Answer 1

您完全正确：问题是当您引用的 NodeList (target.childNodes) 处于活动状态时，您使用的是静态索引：当您删除其中一些时，它会更新子节点。

最简单的方法是制作一个元素子节点的静态列表。您似乎正在尝试这样做，但是 Javascript 具有动态类型，因此 var children = new Array(); 基本上没有任何用处。它不会强制 NodeList 成为一个数组。你想要的功能是 Array.from:

var children = Array.from(target.childNodes);
var child; // don't forget to declare this variable
for(child in children)
{
    if(children[child].tagName == 'DIV'){
        //target.removeChild[child];
        var deleteChild = target.childNodes[child]; // simplify
        deleteChild.parentNode.removeChild(deleteChild);
    }
}

请注意 Array.from 是一个 new-ish 函数，因此您应该为旧版浏览器提供一个 shim。

正确遍历节点 - javascript childNodes

Traversing nodes correctly - javascript childNodes

javascript

html

dom

removechild

child-nodes