js document.getElementsByClassName的使用介绍与自定义函数

2023年6月10日下午1:28 • JavaScript

让我们来详细讲解一下 "document.getElementsByClassName" 的使用介绍与自定义函数的完整攻略。

1. document.getElementsByClassName() 的介绍

document.getElementsByClassName() 是一个 JavaScript 函数，用于获取页面上所有指定 class 属性的元素。

它的语法如下：

document.getElementsByClassName(classname);

其中，classname 是要查找的 class 属性的名字，可以是一个或多个，多个 classname 之间需要用空格分隔。

返回值是一个类似数组的对象，里面包含了所有指定 classname 的元素。如果没有找到匹配的元素，则返回一个空数组。

2. document.getElementsByClassName() 示例说明

2.1 示例一：获取页面中的所有段落元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>获取页面中的所有段落元素</title>
  </head>
  <body>
    <p class="content">这是第一个段落</p>
    <p class="content">这是第二个段落</p>
    <p class="content">这是第三个段落</p>
    <script>
      var paragraphs = document.getElementsByClassName("content");
      for (var i = 0; i < paragraphs.length; i++) {
        console.log(paragraphs[i].innerHTML);
      }
    </script>
  </body>
</html>

这个例子演示了如何获取页面中所有 class 属性为 content 的段落元素，并使用 for 循环遍历每一个元素，然后打印出每个元素的 innerHTML。

2.2 示例二：更改所选元素的样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>更改所选元素的样式</title>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p class="content">这是第一个段落</p>
    <p class="content">这是第二个段落</p>
    <p class="content">这是第三个段落</p>
    <button onclick="highlightContent()">高亮内容</button>
    <script>
      function highlightContent() {
        var paragraphs = document.getElementsByClassName("content");
        for (var i = 0; i < paragraphs.length; i++) {
          paragraphs[i].classList.add("highlight");
        }
      }
    </script>
  </body>
</html>

这个示例演示了如何使用 classList 和 add() 方法来更改所选元素的样式。当按钮被点击时，会获取页面中所有 class 属性为 content 的段落元素，并为它们添加一个 highlight 的 class 属性，这个 class 属性会在 CSS 中定义为红色和粗体。

3. 自定义函数

有时候我们会发现自己需要多次使用 document.getElementsByClassName() 来获取页面元素，这时候我们可以将其封装成一个自定义函数，方便日后的调用。

下面是一个实现这个功能的自定义函数例子：

function getElementsByClassName(className) {
  if (document.getElementsByClassName) {
    return document.getElementsByClassName(className);
  } else {
    var elements = document.getElementsByTagName("*");
    var result = [];
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].className.indexOf(className) != -1) {
        result.push(elements[i]);
      }
    }
    return result;
  }
}

这个函数会先检查浏览器是否支持 document.getElementsByClassName()，如果支持，则使用原生的函数来获取元素；如果不支持，则自己实现一种获取元素的方法。该函数接收一个 classname 参数，用于指定要获取哪个 class 属性的元素，返回一个类似数组的结果集对象，里面包含了所有符合条件的元素。