异常教程

HTML DOM getElementsByClassName() 方法（保姆级教程）

更新时间:

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

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

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

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

前言

在网页开发中，操作 DOM（文档对象模型）是实现动态交互的核心能力之一。而 getElementsByClassName() 方法，作为 DOM API 中最常用的方法之一，能够帮助开发者高效地通过类名（Class Name）定位网页元素。对于编程初学者和中级开发者而言，掌握这一方法不仅能提升代码效率，还能为后续学习更复杂的 DOM 操作打下坚实基础。本文将从方法原理、代码示例到实际应用场景，深入浅出地解析这一工具的强大功能。

方法基础：如何使用 getElementsByClassName()

语法与基本用法

getElementsByClassName() 方法通过元素的 class 属性值返回一个元素集合（HTMLCollection）。其语法如下：

document.getElementsByClassName("class-name");

与 getElementById() 不同的是，该方法返回的是一个动态的集合（Dynamic Collection），而非单个元素。这意味着当页面中的元素发生变化时，该集合会自动更新。

示例代码：

<!-- HTML 结构 -->
<div class="container">
  <p class="highlight">这是一个高亮段落</p>
  <p class="highlight">这是第二个高亮段落</p>
</div>

<script>
  // 获取所有 class 为 "highlight" 的元素
  const highlightedElements = document.getElementsByClassName("highlight");
  console.log(highlightedElements); // 输出 HTMLCollection 对象
</script>

返回值类型：动态的 HTMLCollection

getElementsByClassName() 返回的 HTMLCollection 是一个类似数组的对象，但具有动态特性。例如：

  • 如果后续在页面中新增了一个带有 highlight 类的元素，highlightedElements 会自动包含该新元素。
  • 若删除了一个元素，则集合会立即反映这一变化。

对比表格：
| 特性 | HTMLCollection | NodeList |
|--------------------|-------------------------|-------------------|
| 是否动态更新 | 是（实时反映 DOM 变化） | 否（静态快照） |
| 遍历方式 | 支持索引访问和 for...in | 支持索引和 for...of |
| 是否包含伪元素 | 不支持 | 部分浏览器支持 |

核心用法：如何操作返回的元素集合

获取单个元素并修改属性

通过索引直接访问集合中的元素，可以像操作单个元素一样修改其样式、内容或属性。

示例：动态修改文本颜色

<p class="text">原始文本内容</p>

<script>
  const textElement = document.getElementsByClassName("text")[0];
  textElement.style.color = "red"; // 将文字颜色改为红色
</script>

遍历所有元素并批量操作

当需要对多个元素统一操作时，可以使用循环遍历集合。

示例：为所有按钮添加点击事件

<button class="action-btn">按钮1</button>
<button class="action-btn">按钮2</button>

<script>
  const buttons = document.getElementsByClassName("action-btn");
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function() {
      alert("按钮被点击了！");
    });
  }
</script>

进阶技巧：结合其他 DOM 方法

结合 querySelectorAll() 的选择灵活性

若需要更复杂的选择器（如结合 ID 或标签名），可优先使用 querySelectorAll()，但 getElementsByClassName() 在处理简单类名时性能更高。

对比示例：

// 使用 getElementsByClassName()
const items = document.getElementsByClassName("list-item");

// 使用 querySelectorAll()
const items2 = document.querySelectorAll(".list-item");

两者功能类似，但 querySelectorAll() 返回的是 NodeList，更适合需要静态快照的场景。

动态更新与元素筛选

由于返回的集合是动态的，开发者需注意：

// 示例：动态添加元素后自动更新集合
const container = document.getElementById("my-container");
const newElement = document.createElement("div");
newElement.className = "highlight";
container.appendChild(newElement);

// 此时 highlightedElements 会包含新添加的元素
console.log(highlightedElements.length); // 输出 +1

常见问题与解决方案

问题 1：如何确保获取到正确的元素？

如果返回的集合为空，可能是以下原因：

  1. 类名拼写错误（如 highlight 与 highLight 的区别）；
  2. 元素尚未加载完成（需在 DOMContentLoaded 事件中执行）；
  3. 类名被其他样式覆盖（如使用 !important）。

解决方案：

document.addEventListener("DOMContentLoaded", function() {
  const elements = document.getElementsByClassName("correct-class");
  // 在此执行操作
});

问题 2：如何将 HTMLCollection 转换为数组？

若需使用数组方法（如 map() 或 filter()），可将其转换为真数组：

const elementsArray = Array.from(document.getElementsByClassName("target"));
elementsArray.forEach(element => {
  element.style.backgroundColor = "yellow";
});

实战案例：构建一个动态待办事项列表

需求分析

实现一个简单的待办事项列表，要求：

  1. 用户输入文本后，点击按钮添加新事项；
  2. 点击事项前的复选框，将文字变灰并添加删除线；
  3. 点击“清空已完成”按钮，删除所有已完成事项。

代码实现

<!-- HTML 结构 -->
<div class="todo-container">
  <input type="text" id="task-input" placeholder="输入任务内容">
  <button class="add-btn">添加任务</button>
  <ul id="task-list"></ul>
  <button class="clear-btn">清空已完成</button>
</div>

<script>
  // 添加任务功能
  document.querySelector(".add-btn").addEventListener("click", function() {
    const input = document.getElementById("task-input");
    const taskText = input.value.trim();
    
    if (taskText !== "") {
      const li = document.createElement("li");
      li.className = "task-item";
      li.innerHTML = `<input type="checkbox" class="task-checkbox"> ${taskText}`;
      document.getElementById("task-list").appendChild(li);
      input.value = "";
    }
  });

  // 复选框状态监听
  document.addEventListener("change", function(event) {
    if (event.target.classList.contains("task-checkbox")) {
      const taskItem = event.target.parentElement;
      taskItem.classList.toggle("completed");
    }
  });

  // 清空已完成任务
  document.querySelector(".clear-btn").addEventListener("click", function() {
    const completedItems = document.getElementsByClassName("completed");
    while (completedItems.length > 0) {
      completedItems[0].remove();
    }
  });
</script>

关键点解析

  1. 动态元素操作：通过 getElementsByClassName("completed") 快速获取所有已完成项；
  2. 事件委托：利用事件冒泡监听复选框状态变化，避免为每个新元素单独绑定事件；
  3. DOM 更新的动态性：清空操作后，completedItems 集合会自动更新为新的元素列表。

结论

getElementsByClassName() 方法凭借其简洁的语法和动态特性，成为 DOM 操作中不可或缺的工具。无论是基础的元素样式修改，还是复杂的交互逻辑实现，开发者都能通过这一方法高效完成任务。对于初学者而言，建议从简单案例入手，逐步结合事件监听、动态内容生成等技巧，最终实现功能丰富的网页应用。

掌握这一方法后，可进一步探索 querySelectorAll()、classList 属性等进阶工具，逐步构建更复杂的前端交互逻辑。记住，实践是提升的关键——尝试将本文的代码示例复制到本地环境，动手修改并观察效果，你将更快成长为一名 DOM 操作的“老手”！

最新发布

查看更多文章