0

考虑这段代码：

xr = document.querySelectorAll('.material-tooltip'); // NodeList
console.log(xr.length); // 50
for (ya of xr)
  ya.parentNode.removeChild(ya);
zu = document.querySelectorAll('.material-tooltip');
console.log(zu.length); // 0

这按预期工作，它删除了所有找到的元素。现在考虑这段代码：

xr = document.getElementsByClassName('material-tooltip'); // HTMLCollection
console.log(xr.length); // 50
for (ya of xr)
  ya.parentNode.removeChild(ya);
zu = document.getElementsByClassName('material-tooltip');
console.log(zu.length); // 25

它只删除了一半找到的元素。这是什么原因造成的？

4

1 回答 1

2

querySelectorAll返回一个非实时的NodeList。getElementsByClassName返回一个 live HTMLCollection。前者的行为类似于任何数组：您遍历数组，然后为每个元素做一些事情。但liveHTMLCollection不一样——它的内容随时反映DOM中的当前情况；如果你从 DOM 中删除一个元素，它会在 中消失xr，如果你向 DOM 添加一个适合选择器的元素，它会出现在 中xr，即使在你运行之后也是如此getElementsByClassName。

ya让我们进行第一次迭代0。你删除它xr[0]，它就会从列表中消失。现在元素 1 是xr[0]; ya变成1; 然后你删除xr[1]（元素 2），元素 1 被跳过。然后删除xr[2]（元素 3），并跳过元素 4... 等等。

每当您在 live 上操作时HTMLCollection，要么从后向前走，以免消失的元素弄乱你，要么克隆 以HTMLCollection将其元素固定到位，或者只是执行一个循环删除xr[0]直到xr为空。

于 2015-12-25T04:01:17.293 回答