如何遍历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')时，items集合中有一些项，但当我打印出长度时，它返回0。

还有一件事，当我在chrome中打开inspect>source时，我的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">节点的直接子节点，并且具有值为"grid-container"的class属性，并从中提取id属性的属性值。

Answer 2

试一试这个

我使用扩展运算符来允许在HTMLCollection上使用map

​

window.addEventListener("load", function() {
  const gridContainers = document.querySelectorAll("#tivvits .grid-container");
  const ids = [...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>

​

仅显示更改的步骤

const ids = [...gridContainers].map(div => div.id);

至

[...gridContainers].forEach(div => console.log(div.id));