document.getelementsbytagname 是获取指定标签名元素的高效原生方法，返回动态 htmlcollection；支持大小写不敏感的全局或局部搜索，需用 for 循环或 array.from 处理。
Document.getElementsByTagName 是一个基础但高效的原生 DOM 方法，适合快速获取页面中所有指定标签名的元素集合。它返回的是一个 HTMLCollection（动态实时集合），不是数组，但可通过索引访问、支持 for 循环遍历。
一、基础用法：获取全部同名标签节点
直接传入标签名字符串（不带尖括号），如 "div"、"li"、"input"：
const divs = document.getElementsByTagName("div");
console.log(divs.length); // 当前页面所有 div 元素数量
console.log(divs[0]); // 第一个 div 元素（DOM 节点）
注意：该方法不区分大小写，"DIV" 和 "div" 效果一致；且搜索范围是整个文档（从 开始）。
二、结合父容器缩小范围提升性能
若只需检索某一块区域内的标签，先定位父节点再调用 getElementsByTagName，避免全局扫描：
- 用
document.getElementById("container")或document.querySelector(".section")获取父元素 - 在其上调用
.getElementsByTagName("span")，结果仅限该子树内 - 例如：
const menuItems = document.getElementById("nav").getElementsByTagName("a");
这样既减少匹配量，又避免干扰其他区域同名标签，特别适合组件化或局部更新场景。
三、处理返回的 HTMLCollection（常见坑与技巧）
getElementsByTagName 返回的是动态集合——DOM 变化时它自动更新。这意味着：
- 不能直接用
forEach（HTMLCollection 无此方法），需转数组或用 for 循环 - 推荐写法：
Array.from(divs).forEach(el => el.classList.add("active")); - 或传统 for：
for (let i = 0; i - 若在循环中增删同类标签，要注意 length 实时变化，建议反向遍历或先转成静态数组
四、替代方案对比：什么情况下不该用它？
虽然轻量，但它能力有限：
- 不支持 CSS 选择器（如
"div.active[data-id]"），此时应改用querySelectorAll - 无法按属性、类名、层级精准过滤，需配合
.filter()或额外判断 - 若只需第一个匹配项，
querySelector("p")比getElementsByTagName("p")[0]更语义清晰且安全（避免越界）
简言之：求快、求全、标签明确 → 用 getElementsByTagName；求精、求条件、求灵活 → 切换到 querySelector 系列。
