如何遍历 htmlcollection 对象？

Question

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

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

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

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

这就是 div#tivvits 在我调用函数 show_all_tivvits() 后的样子； show_all_tivvits() 是我创建 ajax 请求并创建新的 divs 的函数比如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() 函数中做的是我想获得 divs 已经在 div#tivvits 中，这样我就不会再次创建它们，但问题是当我使用 console.log() 打印出 document.getElementById('tivvits').getElementsByClassName('grid-container') htmlcollection 中有项目但是当我打印出长度时它 returns 0.

当我在 chrome 中打开 inspect>source 时还有一件事，我的 index.php 没有更新 div#tivvits。我几乎尝试了所有方法来循环此 html 集合，但它不起作用。

我尝试过的事情列表；

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

试一试

我使用扩展运算符允许在 HTMLCollection 上使用地图

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

Answer 2

不是很清楚，但是你在找这样的东西吗？

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

这应该 select 所有 <div> 节点，它们是 <div id="tivvits"> 节点的直接子节点，并且具有值为 "grid-container" 的 class 属性，并且从中提取 id 属性的属性值。

如何遍历 htmlcollection 对象？

How to loop through htmlcollection object?

html

javascript

dom

htmlcollection