为什么这只是遍历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中的元素的一次性快照。因此，它不是活，因此，它们附加到身体后，元素不会从它消失，因此循环会遍历所有元素。