📌  相关文章
📜  HTML DOM getElementsByClassName() 方法(1)

📅  最后修改于: 2023-12-03 14:41:45.758000             🧑  作者: Mango

HTML DOM getElementsByClassName() 方法

getElementsByClassName() 方法是用于在 HTML 文档中根据 class 名称获取元素的 DOM 方法。它返回一个包含符合条件的元素的元素数组。

语法
document.getElementsByClassName(classname)
参数
  • classname：必需。指定要查找的元素的 class 名称。
返回值
  • 返回一个包含符合条件的元素的元素数组。如果没有找到匹配的元素，返回一个空数组。
示例
<!DOCTYPE html>
<html>
  <head>
    <title>getElementsByClassName() 方法示例</title>
  </head>
  <body>
    <div class="example">这是一个示例。</div>
    <p class="example">这是另外一个示例。</p>
    <div class="example">这是第三个示例。</div>
    <script>
      var elements = document.getElementsByClassName("example");
      for(var i = 0; i < elements.length; i++) {
        elements[i].style.color = "red";
      }
    </script>
  </body>
</html>

在以上示例中，getElementsByClassName() 方法被用于获取所有 class 为 example 的元素，并将它们的颜色设置为红色。

注意事项
  • getElementsByClassName() 方法返回的是一个类数组对象，可以通过索引来访问它的元素。
  • 如果有多个 class 名称，可以使用空格将它们分隔开。例如："example1 example2"。
  • getElementsByClassName() 方法会查找整个文档，包括嵌套在其他元素中的元素。