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

Question

当使用 for...of 循环迭代从 DOMParser 返回的 HTMLCollection 时，只返回奇数元素。我认为用 DOMParser 创建的 NodeLists 或 HTMLCollections 不会发生这种情况not。如果我将 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 根据定义是“事件的”，这意味着它始终反射(reflect) DOM 的当前状态，您正在访问第一个元素并将其删除(通过将其附加到主体。)所有元素都向上移动一个位置，因此之前的第二个变为第一个，之前的第三个变为第二个，依此类推。现在您的循环移动到“下一个”元素，或者更准确地说，移动到列表中的下一个位置。这是第二个位置，索引 1 - 当前占据此位置/索引的元素是前第三个​​元素，即包含数字 3 的段落。

---

第二个 fiddle 的不同之处在于，您正在遍历 [...doc.body.children] - 这是一个创建为 static 的数组，开始时包含在 HTMLCollection 中的元素的一次性快照。因此它不是事件的，因此当元素附加到正文时它们不会从其中消失，因此循环会遍历所有这些元素。