如何循环遍历htmlcollection对象？

Question

我几乎查看了这里提出的有关 htmlcollection 的所有问题。

所以我有一个 div，我正在使用 ajax 获取数据并在这个 div 中创建 div，这样它们就不会被硬编码。

这就是我获取数据之前 div 的样子

    <div id="tivvits"></div>

这就是我调用函数 show_all_tivvits() 后 div#tivvits 的样子； show_all_tivvits() 是一个函数，我在其中创建 ajax 请求并创建新的 div 例如div#tivvit-21、div#tivvit-22等

    <div id="tivvits">
        <div id="tivvit-19" class="grid-container">...</div>
        <div id="tivvit-20" class="grid-container">...</div>
    </div>

这是js文件的一部分

    document.addEventListener("DOMContentLoaded", function(){
    
        show_all_tivvits();
        var t = document.getElementById('tivvits');
        const j = t.getElementsByClassName("grid-container");
        const k = Array.prototype.slice.call(j)
        console.log(k);
        for (var i = 0; i < k.length; i++) {
            console.log(k[i]);
        }

    });

我想在 show_all_tivvits() 函数中做的是我想获取已经在 div#tivvits 中的 div，这样我就不会再次创建它们，但问题是当我使用

console.log()

打印出来时

 document.getElementById('tivvits').getElementsByClassName('grid-container')

htmlcollection 中有项目，但是当我打印出 length 时，它返回 0。

当我在 chrome 中打开检查>源代码时，还有一件事是我的 index.php 没有更新 div#tivvits。 我几乎尝试了所有方法来循环这个 htmlcollection，但它不起作用。

我尝试过的事情列表；

Array.from(links)

Array.prototype.slice.call(links)

[].forEach.call(links, function (el) {...});

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

HTMLCollection.prototype.forEach = Array.prototype.forEach;

Answer 1

不太清楚，但你在寻找这样的东西吗？

targets = document.querySelectorAll('#tivvits > .grid-container')
for (let target of targets)
  {console.log(target.id)}

这应该选择作为

<div>

节点的直接子级且具有值为

<div id="tivvits">

的

class

属性的所有

"grid-container"

节点，并从中提取

id

属性的属性值。

Answer 2

世界已经前进。

旧版本

const arrayLikeCollection = Array.prototype.slice.call(htmlCollection) 

和

[].forEach.call(htmlCollection, function (el) {...});

可以写

[...htmlCollection].arrayMethod(....)

然后我们对 htmlCollection 进行了更新，因此它开箱即用地支持 .forEach。然而，其他数组方法，如 map、filter、some 和 every 仍然需要将 hmtlCollection 转换为 arrayLike 集合。

在 2024 年，共识是使用 Array.from，因为它的名称非常具有描述性。

这也是我现在选择的方法，因为如果上面一行的语句没有分号，则数组扩展可能会产生恼人的错误：

const collection = document.querySelectorAll('.someClass')
[...collection].someMethod(...) // the [] is seen as belonging to the line before

所以这是目前推荐的方式

window.addEventListener("DOMContentLoaded", () => { // when the elements are available
  const gridContainers = document.querySelectorAll("#tivvits .grid-container");
  const ids = Array.from(gridContainers).map(div => div.id);
  console.log(ids)
});

<div id="tivvits">
  <div id="tivvit-19" class="grid-container">...</div>
  <div id="tivvit-20" class="grid-container">...</div>
</div>