JavaScript 文档对象模型 getElementsByClassName

简介

在 JavaScript 中，文档对象模型（Document Object Model，简称 DOM）是用于访问、操作 HTML 和 XML 文档的方式。getElementsByClassName 是 DOM 提供的一个方法，用于通过类名查找页面元素。

语法

document.getElementsByClassName(classNames);

• classNames：一个或多个类名，用空格分隔。

返回值

返回一个类数组对象，包含所有具有指定类名的元素。

示例

HTML:

<div class="container">
  <h1 class="title">标题</h1>
  <p class="content">内容</p>
  <ul class="list">
    <li class="item">列表1</li>
    <li class="item">列表2</li>
    <li class="item">列表3</li>
  </ul>
</div>

JavaScript:

const items = document.getElementsByClassName("item");
console.log(items);

输出:

HTMLCollection [li.item, li.item, li.item]

注意事项

• getElementsByClassName 返回的是一个类数组对象，可以通过下标或迭代方式访问其中的元素。
• 类名的匹配是精确匹配，要求完全一致。如果一个元素有多个类名，需要同时满足才能被选中。
• 如果没有匹配的元素，返回一个空的类数组对象。

浏览器兼容性

getElementsByClassName 在各大现代浏览器中都得到了支持，包括 Chrome、Firefox、Safari、Edge 等。但是在旧版本的 Internet Explorer 中，只兼容 IE9 及更高版本。

总结

getElementsByClassName 是 DOM 提供的一个强大而便捷的方法，通过类名查找页面中的元素。它可以方便地选择多个元素并进行相应的操作。在实际开发中，熟练运用 getElementsByClassName 可以提高代码的效率和可维护性。