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中删除它们中的每一个.(所有元素都在a <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()检查,而且通常更安全.

第二个问题是,当您删除子项时,您更改列表的长度.如果你删除了孩子0,那么曾经是孩子1的孩子就变成了孩子0.因此,你真正想要的是一个简单的while循环:

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

或者,更简单:

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

我还应该注意(假设您正在使用HTML DOM),通过简单地通过.innerHTML以下方式对其进行清理,可以更轻松地清除元素的所有子节点:

videoTitlesElement.innerHTML = "";