如何通过JavaScript循环遍历同class元素批量获取video-count文本值？

我的网站包含多个同名class的元素。执行以下代码：

var z = document.getElementsByClassName('DivContainerV2');

可得到69个元素：

0: div.DivContainerV2
1: div.DivContainerV2
2: div.DivContainerV2
3: div.DivContainerV2
...
68: div.DivContainerV2
69: div.DivContainerV2

每个元素下都有一个video-count类元素，我需要获取其文本值。目前我只能通过修改索引逐个获取：

var a = document.getElementsByClassName('DivItemContainerV2')[0].getElementsByClassName('video-count')[0].innerText;

var a = document.getElementsByClassName('DivItemContainerV2')[1].getElementsByClassName('video-count')[0].innerText;

var a = document.getElementsByClassName('DivItemContainerV2')[2].getElementsByClassName('video-count')[0].innerText;

var a = document.getElementsByClassName('DivItemContainerV2')[3].getElementsByClassName('video-count')[0].innerText;

请问是否可以通过循环实现对该div类所有实例的批量查询？我尝试了以下代码：

var a = [];
for(let i = 0 ; i <= z; i++) { 
  a = document.getElementsByClassName('DivItemContainerV2')[i].getElementsByClassName('video-count')[0].innerText
}

但出现错误：cannot read properties of undefined (reading 'getElementsByClassName')，我的期望输出是包含视频计数的数组：

a = ['2391', '29k', '194'...]

你的代码存在几个问题，修正后即可实现批量获取：

1. 循环条件错误：z是HTMLCollection对象而非数字，循环条件应使用z.length，且索引范围是i < z.length（索引从0开始，到length-1结束）。
2. 数组赋值错误：你每次循环直接覆盖a的值，应该用a.push()将结果追加到数组中。
3. 类名不一致：前面定义的z对应DivContainerV2，但循环里用了DivItemContainerV2，需统一为正确的类名。

修正后的for循环代码 #

var containers = document.getElementsByClassName('DivContainerV2');
var videoCounts = [];

for (let i = 0; i < containers.length; i++) {
  // 从当前容器下查找video-count元素
  var countElement = containers[i].getElementsByClassName('video-count')[0];
  // 确保元素存在再获取文本，避免报错
  if (countElement) {
    videoCounts.push(countElement.innerText.trim());
  }
}

console.log(videoCounts); // 输出目标数组

更简洁的写法（用Array.from和map） #

可以将HTMLCollection转为数组后用map方法，代码更简洁：

var videoCounts = Array.from(document.getElementsByClassName('DivContainerV2'))
  .map(container => {
    var countElement = container.getElementsByClassName('video-count')[0];
    return countElement ? countElement.innerText.trim() : null;
  })
  // 过滤掉可能的null值（如果某个容器下没有video-count元素）
  .filter(item => item !== null);

console.log(videoCounts);

注意：如果实际容器类名确实是DivItemContainerV2，将代码中的DivContainerV2替换为该类名即可。

内容的提问来源于stack exchange，提问作者DrPaulVella