本文介绍如何通过 queryselectorall 配合 map 或 foreach 方法，高效、安全地遍历多个具有相同类名的容器元素，并提取其内部 .video-count 元素的 innertext 值，最终生成结构化数组。
本文介绍如何通过 queryselectorall 配合 map 或 foreach 方法，高效、安全地遍历多个具有相同类名的容器元素，并提取其内部 .video-count 元素的 innertext 值，最终生成结构化数组。
在实际前端开发中，我们常遇到一类 DOM 结构：多个外层容器（如 .DivContainerV2）嵌套相同结构的子元素（如 .video-count），需统一提取其文本内容。直接使用 getElementsByClassName 并手动索引不仅冗余，还易因越界或 DOM 变化引发 Cannot read properties of undefined 错误——正如你在循环中遇到的问题：for (let i = 0; i
✅ 推荐方案是使用现代、语义清晰且返回静态 NodeList 的 document.querySelectorAll()：
// 一步定位所有目标 .video-count 元素（位于 .DivContainerV2 内部）
const videoCountElements = document.querySelectorAll('.DivContainerV2 .video-count');
由于 querySelectorAll 返回的是 NodeList（非 Array），不能直接调用 map()，需先转为数组。推荐使用 Array.from()（兼容性好，支持 IE11+）或展开语法 [...videoCountElements]（ES2015+）：
const videoCounts = Array.from(videoCountElements).map(el => el.innerText.trim() // .trim() 清除前后空白符（如换行、空格） ); console.log(videoCounts); // ['2391', '29k', '194', ...]
若需兼容更旧环境或偏好显式遍历，也可用 forEach：
const videoCounts = [];
Array.from(videoCountElements).forEach(el => {
videoCounts.push(el.innerText.trim());
});
⚠️ 注意事项：
- 避免重复查询：不要在循环内反复调用 getElementsByClassName()，每次执行都会触发 DOM 重排/重绘，性能差且易出错；
-
容错处理：若某些 .DivContainerV2 内无 .video-count，querySelectorAll 自动跳过，无需额外判断；但若需兜底（如默认值 '0'），可改用：
const videoCounts = Array.from(videoCountElements).map(el => el?.innerText?.trim() || '0' );
- 动态内容场景：若元素由 AJAX 或框架（如 React）异步渲染，确保脚本在 DOM 加载完成后执行（如 DOMContentLoaded 事件或 window.onload）。
综上，querySelectorAll + Array.from + map 是简洁、健壮、高性能的标准解法，既规避了原生 HTMLCollection 的局限性，又符合现代 JavaScript 最佳实践。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
