javascript获取元素集合主要有queryselectorall()返回静态nodelist和getelementsby*系列返回动态htmlcollection；前者支持css选择器及foreach，后者仅限标签、class、name属性且需转数组操作。
JavaScript 提供多种方法获取页面中的元素集合，核心在于使用 DOM 查询 API 返回 NodeList 或 HTMLCollection 类型的对象，它们都支持遍历和常见数组操作（部分需转换）。
用 querySelectorAll() 获取匹配的元素集合
这是最常用、最灵活的方式，支持任意 CSS 选择器，返回静态 NodeList（不会随 DOM 变化自动更新）。
- 获取所有段落：
document.querySelectorAll('p') - 获取 class 为 "item" 的 div：
document.querySelectorAll('div.item') - 获取 data-status="active" 的按钮：
document.querySelectorAll('button[data-status="active"]')
NodeList 支持 forEach、length 和索引访问，但不支持 map、filter 等数组方法（可先转成数组：Array.from(nodeList) 或 [...nodeList]）。
用 getElementsBy* 系列方法获取实时集合
这些方法返回 HTMLCollection（动态集合，DOM 更新时会自动反映变化），性能略高但选择器能力有限：
-
document.getElementsByTagName('div')—— 按标签名 -
document.getElementsByClassName('box')—— 按 class 名（注意是复数） -
document.getElementsByName('username')—— 按 name 属性（常用于表单元素）
HTMLCollection 不支持 forEach（旧版 IE 也不支持），可用 for 循环或转成数组再操作：Array.from(collection)。
注意 NodeList 和 HTMLCollection 的关键区别
两者都像数组但不是 Array：
- NodeList 来自
querySelectorAll和childNodes，可含任意节点类型 - HTMLCollection 只包含 Element 节点，且是“活的”（live），比如
getElementsByClassName结果会随 class 增删实时变化 - 两者都有
length，但只有 NodeList（现代浏览器）原生支持forEach
批量操作元素集合的实用技巧
拿到集合后，常需统一处理：
- 给多个按钮加点击事件：
buttons.forEach(btn => btn.addEventListener('click', handler)) - 提取所有链接的 href：
Array.from(links).map(a => a.href) - 筛选并修改特定元素：
Array.from(items).filter(el => el.dataset.ready === 'true').forEach(el => el.classList.add('processed'))
避免在循环中频繁操作 DOM（如反复设置 innerHTML），建议先收集数据或使用文档片段优化性能。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
