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而不是全部。我认为长度也在不断变化，因此无法让所有孩子都接受。

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

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是一个新功能，因此您应该为旧浏览器提供垫片。

正确遍历节点 - javascript childNodes

1 个答案: