本文介绍如何高效获取页面中所有匹配 .DivContainerV2 容器内 .video-count 元素的文本内容，并汇总为数组，避免手动索引和 undefined 报错问题。
本文介绍如何高效获取页面中所有匹配 `.divcontainerv2` 容器内 `.video-count` 元素的文本内容，并汇总为数组，避免手动索引和 `undefined` 报错问题。
在实际前端开发中，我们常需批量处理具有相同类名的 DOM 元素。例如，页面存在 69 个 <div class="DivContainerV2">，每个内部嵌套一个 <div class="video-count">，目标是提取全部视频计数值并构建成字符串数组（如 ['2391', '29k', '194', ...]）。
你最初尝试用 getElementsByClassName 配合 for 循环，但出现 Cannot read properties of undefined 错误，根本原因有两点：
- z 是 HTMLCollection（非数字），直接用于 i <= z 会导致循环条件失效；
- document.getElementsByClassName('DivItemContainerV2')[i] 可能不存在（尤其当实际元素数量少于 i 时），导致后续链式调用失败。
✅ 推荐方案：使用 querySelectorAll + Array.from() + map()
这是现代、简洁且健壮的写法：
// 一步定位所有 .DivContainerV2 内的 .video-count 元素
const videoCountElements = document.querySelectorAll('.DivContainerV2 .video-count');
// 转换为真数组，并提取并清洗文本内容
const videoCounts = Array.from(videoCountElements).map(el => el.innerText.trim());
console.log(videoCounts); // ['2391', '29k', '194', ...]? 关键优势说明：
- querySelectorAll 返回静态 NodeList（不会随 DOM 变化而更新），更可控；
- .video-count 直接限定在 .DivContainerV2 内部作用域，语义清晰、性能更优；
- Array.from() 将类数组对象转为标准数组，方可使用 map() 等高阶方法；
- .trim() 去除可能存在的首尾空白或换行符，确保数据整洁。
? 替代写法（兼容性更强 / 显式遍历）：
若需兼容较老环境，或希望逻辑更显式，可使用 forEach：
const videoCounts = [];
const elements = Array.from(document.querySelectorAll('.DivContainerV2 .video-count'));
elements.forEach(el => {
if (el && el.innerText) { // 增加安全校验
videoCounts.push(el.innerText.trim());
}
});⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 确保 DOM 已加载完成（建议在 DOMContentLoaded 事件或 window.onload 中执行）；
- 若 .video-count 在某些 .DivContainerV2 中缺失，querySelectorAll 自动跳过——无需额外容错；若需默认值（如 '0'），可用 el?.innerText?.trim() || '0'；
- 避免重复调用 getElementsByClassName 或 querySelectorAll 在循环内，否则会显著降低性能。
总结：放弃基于索引的手动遍历，拥抱语义化 CSS 选择器与函数式数组方法，代码更简短、可读性更高、鲁棒性更强。
