javascript - 正确遍历节点 - javascript childNodes

Question

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

//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”作为子项，这只会删除两个 DIV，而不是全部。 我认为由于长度也在不断变化，因此它无法到达所有 child 。

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

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 是一个新函数，因此您应该为旧版浏览器提供一个填充程序。