JavaScript中通过document.getElementsByTagName()按标签名批量查询元素，返回动态HTMLCollection；需转为数组才能使用map、forEach等方法；支持局部查询；querySelectorAll更灵活且返回静态NodeList。
JavaScript 中通过标签名批量查询页面元素，主要使用 document.getElementsByTagName() 方法。
使用 getElementsByTagName 获取同标签名的所有元素
该方法返回一个动态的 HTMLCollection，包含文档中所有指定标签名的元素（不区分大小写）：
- 传入标签名字符串，如
"div"、"a"、"img" - 返回结果是实时集合：DOM 变化时，集合内容会自动更新
- 需注意它返回的是类数组对象，不是真正的 Array，不能直接用
map、forEach等数组方法
示例：
const divs = document.getElementsByTagName("div");console.log(divs.length); // 输出当前页面 div 元素个数
console.log(divs[0]); // 获取第一个 div 元素
转换为数组以便使用数组方法
若需调用 forEach、filter、map 等方法，可将 HTMLCollection 转为数组：
立即学习“Java免费学习笔记（深入）”；
- 推荐用扩展运算符：
[...divs].forEach(...) - 也可用
Array.from(divs) - 旧浏览器兼容可用
Array.prototype.slice.call(divs)
示例：
[...document.getElementsByTagName("p")].forEach(p => {p.style.color = "blue";
});
注意作用域：可限定在某个元素内查询
getElementsByTagName 不仅可在 document 上调用，也能在任意 DOM 元素上调用，实现局部范围查找：
-
container.getElementsByTagName("span")只查 container 内部的 span - 适合组件化开发或处理模态框、列表项等局部结构
示例：
const article = document.querySelector(".article");const linksInArticle = article.getElementsByTagName("a");
对比 querySelectorAll（更灵活的替代方案）
虽然 getElementsByTagName 简单高效，但 document.querySelectorAll("div") 更常用，因为：
- 返回静态 NodeList，不会随 DOM 变化自动更新（更可预测）
- 支持复杂选择器，如
"div.active[data-id]"、"ul li a" - 原生支持
forEach（现代浏览器中 NodeList 已实现迭代器）
如果只需按标签名查，两者性能接近；若需条件筛选，优先选 querySelectorAll。
