为什么这只遍历HTMLCollection的奇数元素？

Question

当使用for ... of循环遍历从DOMParser返回的HTMLCollection时，仅返回奇数元素。 我不认为不是用DOMParser创建的NodeLists或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/

Answer 1

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

稍微调整一下代码-在控制台中，您将看到按正确的顺序显示所有五个段落元素。

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

而且，由于HTMLCollection在定义上是“活动的”，这意味着它始终反映DOM的当前状态，因此您正在访问第一个元素，并将其删除（通过将其附加到正文中）。所有元素都向上移动一个位置，因此以前的第二个变成第一，以前的第三个变成第二，依此类推。 现在，您的循环将移至“下一个”元素，或更确切地说，移至列表中的下一个位置 。 那就是第二个位置，索引1- 当前占据该位置/索引的元素是前一个第三元素，该段落包含数字3。

---

第二个小提琴的不同之处在于，您正在循环[...doc.body.children] -这是一个数组，该数组创建为HTMLCollection开头的元素的静态 ，一次性快照。 因此，它不是活的 ，因此当元素附加到身体上时元素不会从元素中消失，因此循环遍历了所有元素。