Javascript (HTMLCollection) 中的 object 长度不一致

Question

我正在尝试遍历 HTMLCollection 的子项，但得到的结果不一致。 更具体地说，当总共有 6 件商品时，我得到了 3 件商品。

这是我获取元素的方式：

var entries = doc.getElementById("entries").children

这是控制台中打印的日志：

这太完美了，正是我需要的。 现在，当我点击开关时，我得到的是：

此外，如果我迭代元素：

for (let entry of entries) { 
  console.log(entry);
}

这是我得到的（只有三个项目）：

我不明白为什么会这样。 会喜欢社区的任何想法。 提前致谢。

PS 只是为了确保我做了console.log(entries.length)并且 output 是6 。

PPS 我也尝试了不同的 for in 循环。 output 是一样的。

[编辑] 这是这个问题的代码示例。

在 javascript 中，我获取“下一个”页面，使用 DOMParser 解析 HTML，仅获取 ID 为“entries”的 DOM 元素的children元素。 然后我遍历那些有 6 个孩子。

loadMore(url, toAddLocation, pageLinks) {
        fetch(url, {
            method: 'GET',
            headers: {
                'Content-Type': 'text/html',
            },
        })
        .then(response => response.text())
        .then(data => {
            var doc = new DOMParser().parseFromString(data, "text/html")
            
            console.log(doc.getElementById("entries"))
            console.log(typeof doc.getElementById("entries"))
            var entries = doc.getElementById("entries").children

            console.log(entries, entries.length)
            for (let entry of entries) { 
                console.log(entry);
                toAddLocation.appendChild(entry)
            }
            var pagination = doc.getElementById("pagination").innerHTML
            pageLinks.innerHTML = pagination;
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }

这是我要解析的 HTML。 我离开了感兴趣的区块：

<div data-target="infinite-scroll.entries" id="entries">
  <article>Item 1</article>
  <article>Item 2</article>
  <article>Item 3</article>
  <article>Item 4</article>
  <article>Item 5</article>
  <article>Item 6</article>
</div>

如果您需要更多信息，请告诉我。

Answer 1

将 HTMLCollection 冻结到一个数组中解决了这个问题，就像 Kaiido 建议的那样。

所以，我改变了

var entries = doc.getElementById("entries").children

到

var entries = [...doc.getElementById("entries").children]