为什么这只是迭代 HTMLCollection 的奇怪元素

Why is this only iterating over odd elements of HTMLCollection?

本文关键字：元素 HTMLCollection 迭代 为什么      更新时间：2023-09-26

当使用for...循环以迭代从 DOMParser 返回的 HTML 查询，仅返回奇数元素。我不认为这不是用 DOMParser 创建的 NodeList 或 HTMLCollections 发生的。如果我将 HTMLCollection 转换为数组，也不会发生这种情况。

知道为什么会这样吗？

if (!HTMLCollection.prototype[Symbol.iterator]) {
    HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
}
let parser = new DOMParser();
let markup = '<p>Node 1</p><p>Node 2</p><p>Node 3</p><p>Node 4</p><p>Node 5</p>';
let doc = parser.parseFromString(markup, "text/html");
for (let element of doc.body.children) {
    document.body.appendChild(element);
}

  • https://jsfiddle.net/8unbum1q/

  • https://jsfiddle.net/soq44eL2/

for (let element of doc.body.children) {
    //document.body.appendChild(element);
    console.log(element);
}

对代码进行此小调整 - 在控制台中，您将看到所有五个段落元素都以正确的顺序显示。

通过将元素附加到正文，可以将它们从doc变量包含的文档中删除。

由于 HTMLCollection 根据定义是"实时的"，这意味着它始终反映 DOM 的当前状态，因此您正在访问第一个元素并删除它(通过将其附加到正文(。所有元素向上移动一个位置，因此前第二个元素变为第一个，前第三个元素变为第二个元素，依此类推。现在，您的循环将移动到"下一个"元素，或者更准确地说，移动到列表中的下一个位置。即位置二，索引1，而目前占据该位置/索引的元素是前第三个元素，即包含数字3的段落。

在你的第二个小提琴中，不同的是你循环[...doc.body.children] - 这是一个数组，作为开始时包含在 HTMLCollection 中的元素的静态一次性快照创建。因此，它不是活的，因此当元素附加到身体上时，它们不会从它身上消失，所以循环会覆盖所有这些元素。

相关文章：