javascript - for...in 循环不遍历所有属性？

Question

当我加载我的页面时，会创建一个 nodeList，它看起来像这样:

[text, h4, text, span, br, input, br, span, br, input, br, span, br, input, br, span, br, input, br]

我创建了一个简单的 for循环遍历所有这些元素并从 DOM 中删除每一个元素。 (所有元素都在 <section> 中)

这是循环:

        for(element in videoTitlesElement.childNodes){
            if(!isNaN(element)){
                videoTitlesElement.removeChild(
                        videoTitlesElement.childNodes[element]);
            }
        }

但是，在循环结束时，nodeList 看起来像这样:

[h4, span, input, span, input, span, input, span, input]

并非所有元素都被删除。为什么？

谢谢。

Answer 1

两件事。首先，在遍历数字索引时不要使用 for ... in；使用普通的 for 循环。然后你就不需要 isNaN() 检查，而且它通常更安全。

第二个问题是当你删除一个 child 时，你改变了列表的长度。如果您删除 child 0，那么曾经是 child 1 的 child 会变成 child 0。因此，您真正想要的是一个简单的 while 循环:

while (videoTitlesElement.childNodes.length)
  videoTitlesElement.removeChild(videoTitlesElement.childNodes[0]);

或者，更简单:

while (videoTitlesElement.firstChild)
  videoTitlesElement.removeChild(videoTitlesElement.firstChild);

我还应该注意(假设您正在使用 HTML DOM)通过简单地通过 .innerHTML 来清除元素的所有子节点会更容易:

videoTitlesElement.innerHTML = "";