document.getElementsByTagName 是根据标签名获取所有匹配元素的方法，返回实时更新的 HTMLCollection；标签名不区分大小写，需转数组才能使用 map 等方法。
document.getElementsByTagName 是 JavaScript 中用于根据标签名获取页面中所有匹配元素的方法，它返回一个 HTMLCollection（类数组对象），包含所有指定标签名的元素，按文档流顺序排列。
基本用法
语法很简单：
document.getElementsByTagName('标签名')例如：
const divs = document.getElementsByTagName('div');const imgs = document.getElementsByTagName('img');
注意：标签名不带尖括号，且**不区分大小写**（但推荐小写，符合 HTML 标准）。
获取到的是 HTMLCollection，不是数组
HTMLCollection 是**实时集合（live collection）**，意味着 DOM 变化会自动反映在该集合中。它支持按索引访问（divs[0]）、.length，但不支持 map、forEach 等数组方法。
如需转为数组以便使用数组方法，可这样处理：
Array.from(divs)-
[...divs]（展开运算符） -
Array.prototype.slice.call(divs)（兼容旧浏览器）
常用操作示例
✅ 遍历所有 p 元素并修改内容：
const ps = document.getElementsByTagName('p');for (let i = 0; i ps[i].textContent = '这是第 ' + (i + 1) + ' 个段落';
}
✅ 获取第一个 button 并绑定点击事件：
const buttons = document.getElementsByTagName('button');if (buttons.length > 0) {
buttons[0].addEventListener('click', () => console.log('点了第一个按钮'));
}
✅ 用 for...of 遍历（现代写法，需先转数组或直接用 for...of 配合 HTMLCollection）：
for (const btn of document.getElementsByTagName('button')) {btn.style.backgroundColor = '#eee';
}
与其他查询方法对比
• getElementsByTagName('*') 获取页面所有元素（包括 html、body 等）；
• 相比 document.querySelectorAll('div')（返回静态 NodeList），getElementsByTagName 性能略优，尤其在只读场景；
• 它只能按标签名查，不支持类名、ID 或复杂选择器 —— 此时应选 querySelectorAll。
