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

Question

当我加载我的页面时，会创建一个节点列表，它看起来像这样：

[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 时，您会更改列表的长度。如果你去掉child0，那么原来child1的child就变成了child0。这样，你真的想要的是一个简单的 while 循环：

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

或者，更简单：

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

我还应该注意（假设您正在使用 HTML DOM）通过简单地爆破它来清除元素的所有 child 节点更容易.innerHTML:

videoTitlesElement.innerHTML = "";

Answer 2

如果您查看您的结果，您会注意到您跳过了第二个项目。

如果您将此想象成一个带有迭代器的 for 循环，您每次都会递增迭代器，但在再次递增之前从同一集合中删除一个项目。这意味着当您第一次开始循环时位于索引 1 的项目在您删除数组中的第一项后位于索引 0 。因此，当您查看索引 1 时，您已经跳过了该元素。这一直持续到循环结束，所以你错过了第二个项目。

Answer 3

正在迭代的列表 (videoTitlesElement.childNodes) 在迭代过程中正在发生变化。尝试迭代原始列表的副本：

var children = [].slice.call(videoTitlesElement.childNodes);

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

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

for...in loop not looping through all properties?

javascript

for-loop

for-in-loop

nodelist