用原生 HTML 与 JS 遍历页面元素：getElementsByTagName 实战指南

在网页里，想要批量处理一类元素，比如把所有段落加上某个类、把所有的表单做校验，或者按标签名筛出需要操作的节点，原生的 getElementsByTagName 是个直接且高效的选择。它不依赖库，逻辑清晰，适合做轻量级的页面操作和数据提取。

为什么用原生方式？

在工具和框架越来越强大的今天，用原生方法处理常见任务依然有它的优势：轻量、可控、兼容性好。当你需要在移动端或受限环境下运行，或是在服务端生成的页面里做基础的DOM操作时，原生方案往往更直接、更可靠。

基础用法与返回值

const tags = document.getElementsByTagName('p');

这行代码会返回一个类数组对象（HTMLCollection），包含文档中所有 <p> 标签的节点。类数组对象支持索引访问，但不是真正的数组，因此使用数组方法前需要先转成数组或使用 forEach 遍历。

实战场景：批量给段落加样式

假设你有一片文章，想让所有段落都展示出“引用”的样式，可以用：

const paragraphs = document.getElementsByTagName('p');
Array.from(paragraphs).forEach(p => {
  p.classList.add('quote-style');
});

这段代码把所有段落的类改为 quote-style，你在CSS里再定义这个类的样式即可，实现轻量的格式统一。

进阶：按条件筛选与操作

很多时候，标签名只是筛选的起点。你可以结合属性、文本内容等进一步过滤。

按属性筛选

const links = document.getElementsByTagName('a');
Array.from(links).forEach(link => {
  if (link.getAttribute('target') === '_blank') {
    link.style.backgroundColor = 'yellow';
  }
});

这段代码把所有在新标签页打开的链接背景颜色改为黄色，便于一眼识别。

按文本内容筛选

const headings = document.getElementsByTagName('h1');
Array.from(headings).forEach(h => {
  if (h.textContent.includes('指南')) {
    h.style.fontSize = '24px';
  }
});

这段代码对包含“指南”关键词的标题进行放大，让内容结构更清晰。

兼容性与注意点

• getElementsByTagName 对于小规模页面操作非常友好，但大规模操作时，频繁的DOM操作会影响性能，建议在操作前收集所有节点，批量处理。
• 该方法对大小写不敏感，getElementsByTagName('P') 与 getElementsByTagName('p') 效果一致。
• 与 querySelectorAll 相比，getElementsByTagName 更直观，但功能上不如后者强大；当需要组合选择器或复杂筛选时，后者更合适。

结尾

掌握 getElementsByTagName 并不意味着你只能停留在基础的标签遍历，结合属性、内容与样式，你可以快速完成页面的批量处理与优化。在工具纷繁的前端生态里，原生能力是理解和控制页面的基石，学会用它来简化常见任务，能让你在开发与调试时更高效、更从容。