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);
}

Answer 1

for (let element of doc.body.children) {
    //document.body.appendChild(element);
    console.log(element);
}

对您的代码进行一些调整 - 在控制台中，您将看到所有五个段落元素以正确的顺序显示。

通过向主体添加元素，您从doc变量包含的文档中删除。

由于HTMLCollection是＆＃34; live＆＃34;根据定义，这意味着它总是反映DOM的当前状态，您正在访问第一个元素，并将其删除（通过将其附加到正文。）所有元素向上移动一个位置，因此以前第二个成为第一个，以前第三个成为第二个，依此类推。现在你的循环移动到＆＃34; next＆＃34;元素，或者更准确地说，是列表中的下一个位置。这是第二个位置，索引1 - 占据此位置/索引的当前元素是前第三个元素，该段落包含数字3。

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

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

1 个答案: