為什么這只遍歷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開頭的元素的靜態 ，一次性快照。 因此，它不是活的 ，因此當元素附加到身體上時元素不會從元素中消失，因此循環遍歷了所有元素。