为什么这只迭代HTMLCollection的奇数元素？

Question

当使用for ... of循环迭代从DOMParser返回的HTMLCollection时,只返回奇数元素.我不认为NodeLists或HTMLCollections 不是用DOMParser创建的.如果我将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 的当前状态,您正在访问第一个元素,并将其删除(通过将其附加到正文.)所有元素向上移动一个位置,因此以前的第二个成为第一个,以前的第三个成为第二个,依此类推.现在你的循环移动到"next"元素,或者更确切地说,移动到列表中的下一个位置.这是第二个位置,索引1 - 当前占据此位置/索引的元素是前三个元素,包含数字3的段落.

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