异常教程

HTML DOM getElementsByTagName() 方法（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，DOM（文档对象模型）是连接HTML、CSS和JavaScript的核心桥梁。它允许开发者通过代码动态操作网页内容。而 getElementsByTagName() 方法作为DOM操作的基础工具之一，能够高效定位和修改页面元素。无论是编程初学者还是中级开发者，掌握这一方法都能显著提升前端开发效率。本文将从原理、用法、案例到常见问题，系统解析 HTML DOM getElementsByTagName() 方法，并提供实用技巧帮助读者快速上手。

方法概述：理解 getElementsByTagName() 的核心作用

什么是DOM节点？

可以将DOM想象为一棵“网页树”，每个HTML元素都是树上的一个节点（Node）。例如，<div>``<p>``<button> 等标签对应不同的节点类型。getElementsByTagName() 的作用，就是沿着这棵树“搜索”所有指定标签名的节点。

方法语法：

element.getElementsByTagName(tagName);
  • element：可选参数，表示从哪个节点开始搜索。若省略，则默认从整个文档（document）开始。
  • tagName：要查找的HTML标签名，如 "div"、"span"，大小写不敏感（但推荐使用小写）。

返回值类型：NodeList

该方法返回一个 NodeList 对象，类似于数组，但具有以下特点：

  • 支持通过索引访问元素（如 nodes[0]）。
  • 不具备数组的 map()、filter() 等方法，需转换为数组后使用（如 [...nodes]）。
  • 动态更新：若页面元素被修改，NodeList 会实时反映变化。

形象比喻：
若把DOM比作图书馆的书架，getElementsByTagName("book") 就像一个智能书车，能自动收集所有“书”类书籍，并且如果书架上有新书被添加或移除，书车的内容会立刻同步变化。

基础用法：从静态页面到动态交互

案例1：获取并修改元素样式

假设页面有三个段落，想通过JavaScript动态修改它们的背景颜色：

<!-- HTML结构 -->
<p class="content">第一个段落</p>
<p class="content">第二个段落</p>
<div>
  <p>嵌套在div中的段落</p>
</div>

// 获取所有<p>元素
const paragraphs = document.getElementsByTagName("p");

// 为每个段落添加背景色
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].style.backgroundColor = "lightblue";
}

关键点：

  • 即使 <p> 标签嵌套在其他元素中，只要标签名匹配，都会被选中。
  • 直接操作 style 属性可快速修改内联样式。

案例2：动态添加元素

假设需要根据用户输入动态创建 <li> 元素，并追加到列表中：

<!-- HTML结构 -->
<input type="text" id="newItem">
<button onclick="addItem()">添加</button>
<ul id="myList"></ul>

function addItem() {
  const input = document.getElementById("newItem");
  const newItemText = input.value.trim();
  
  if (newItemText) {
    // 创建新列表项
    const newLi = document.createElement("li");
    newLi.textContent = newItemText;
    
    // 将新元素添加到<ul>中
    const list = document.getElementById("myList");
    list.appendChild(newLi);
    
    // 清空输入框
    input.value = "";
  }
}

扩展思考：
若想同时获取所有 <li> 元素并批量操作，可以用 getElementsByTagName("li")，例如清空列表：

document.getElementById("myList").getElementsByTagName("li").length; // 获取当前列表项数量

进阶技巧：结合其他DOM方法与条件判断

技巧1：限制搜索范围

通过指定 element 参数，可以缩小搜索范围。例如，仅在特定容器内查找元素：

// 假设页面有<div id="container">...</div>
const container = document.getElementById("container");
const innerDivs = container.getElementsByTagName("div"); // 仅查找容器内的div

技巧2：结合条件筛选元素

若需根据元素属性或内容进一步筛选，可在循环中添加条件判断：

// 查找所有class为"active"的按钮
const buttons = document.getElementsByTagName("button");
for (let btn of buttons) {
  if (btn.className.includes("active")) {
    btn.style.color = "red";
  }
}

常见问题与解决方案

问题1：NodeList 不是数组，如何处理？

若需要使用数组方法，可以将其转换为数组：

const paragraphsArray = Array.from(document.getElementsByTagName("p"));
paragraphsArray.forEach(p => console.log(p.textContent));

问题2：动态添加的元素未被获取？

由于 getElementsByTagName() 返回的是实时更新的NodeList，动态添加的元素会自动包含在内。例如：

// 添加新元素后立即获取
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);
const allDivs = document.getElementsByTagName("div"); // 包含新添加的div

问题3：如何区分同名标签的不同层级？

通过检查父元素或类名进行区分：

const allDivs = document.getElementsByTagName("div");
for (const div of allDivs) {
  if (div.parentElement.tagName === "SECTION") {
    // 处理位于<section>内的div
  }
}

与类似方法的对比：选择最优方案

对比1：getElementsByTagName() vs querySelectorAll()

  • getElementsByTagName()：
    • 优点：兼容性好，支持IE等旧浏览器。
    • 缺点：仅能按标签名筛选，无法使用CSS选择器。
  • querySelectorAll()：
    • 优点：支持复杂选择器（如 .class > div）。
    • 缺点：返回的是静态 NodeList，需重新调用才能获取新增元素。

使用建议：

  • 简单标签名查询时，优先使用 getElementsByTagName()。
  • 需要复杂筛选或选择器时，选择 querySelectorAll()。

对比2：动态 vs 静态获取

若DOM结构频繁变化（如实时数据更新），getElementsByTagName() 更适合，因其返回动态列表；若结构固定，则两种方法均可。

实战案例：构建交互式导航栏

场景需求

创建一个导航栏，点击菜单项时：

  1. 移除所有菜单项的激活状态。
  2. 为当前点击项添加激活样式。
  3. 显示对应的子菜单内容。
<!-- HTML结构 -->
<nav id="menu">
  <div class="menu-item active">首页</div>
  <div class="menu-item">产品</div>
  <div class="menu-item">关于我们</div>
</nav>

<div id="content">
  <div class="content-pane active">首页内容</div>
  <div class="content-pane">产品内容</div>
  <div class="content-pane">关于我们内容</div>
</div>

document.addEventListener("DOMContentLoaded", function() {
  const menuItems = document.getElementsByTagName("div");
  
  // 过滤出导航菜单项（假设class为"menu-item"）
  const navItems = [];
  for (const item of menuItems) {
    if (item.classList.contains("menu-item")) {
      navItems.push(item);
    }
  }
  
  // 为每个菜单项添加点击事件
  navItems.forEach(item => {
    item.addEventListener("click", function() {
      // 移除所有激活状态
      navItems.forEach(i => i.classList.remove("active"));
      document.querySelectorAll(".content-pane").forEach(p => p.classList.remove("active"));
      
      // 添加当前激活项
      this.classList.add("active");
      const index = Array.from(navItems).indexOf(this);
      document.querySelectorAll(".content-pane")[index].classList.add("active");
    });
  });
});

关键技巧：

  • 使用 getElementsByTagName("div") 获取所有 <div>，再通过类名过滤目标元素。
  • 结合索引同步菜单项和内容面板的激活状态。

结论与展望

HTML DOM getElementsByTagName() 方法 是前端开发中不可或缺的工具，其高效性、兼容性和动态特性使其适用于从基础元素操作到复杂交互的多种场景。通过本文的讲解和案例，读者应能掌握以下核心能力：

  1. 精准定位页面元素并修改其属性或样式。
  2. 结合其他DOM方法实现动态内容更新。
  3. 解决常见问题并优化代码性能。

随着现代框架（如React、Vue）的普及，直接操作DOM的场景可能减少，但理解底层原理仍能帮助开发者更好地调试问题、优化性能，甚至实现框架无法覆盖的定制化需求。建议读者通过实际项目不断练习，逐步掌握DOM操作的进阶技巧。

最新发布

查看更多文章