爲什麼這只是遍歷HTMLCollection的奇怪元素？

Question

當使用for ...循環遍歷從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的狀態，所以您正在訪問第一個元素，並將其移除（通過將其附加到body）。所有元素向上移動在一個位置上，所以前面的第二個變成第一個，以前的第三個變成第二個，等等。現在你的循環移動到「下一個」元素，或者更確切地說，到列表中的下一個位置。也就是說二號位置，索引1 - 和元素目前佔據這個位置/索引是前第三個要素，包含數字3

---

是什麼在你的第二小提琴不同的段落，是你正在循環播放[...doc.body.children] - 這是一個創建爲靜態的數組，一開始就包含在HTMLCollection中的元素的一次性快照。因此，它不是活，因此，它們附加到身體後，元素不會從它消失，因此循環會遍歷所有元素。