HTML DOM getElementsByClassName() 方法

Document 对象参考手册 Document 对象

获取所有指定类名的元素：

<div class="example">第一 Div 元素 class="example"。</div>
<div class="example">第二个 Div 元素 class="example"。</div>
<p>点击按钮修改第一个 Div 元素的文本信息（索引值为 0 的 class="example")。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
  function myFunction() {
    var x = document.getElementsByClassName("example");
    x[0].innerHTML = "Hello World!";
  }
</script>

尝试一下 »

定义和使用

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法
getElementsByClassName() 4.0 9.0 3.0 3.1 9.5

语法

document.getElementsByClassName(classname)

参数

参数 类型 Description
classname String 必须。你需要获取的元素类名。

多个类名使用空格分隔，如 "test demo"。

技术描述

DOM 版本: Core Level 1 Document Object
返回值： NodeList 对象，表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。

更多实例

获取包含 "example" 和 "color" 类名的所有元素:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    div {
      border: 1px solid black;
      margin: 5px;
    }
  </style>
</head>
<body>

  <div class="example">
    <p>P 元素在在第一个样式为 class="example" 的 Div 元素中。Div 的索引值为 0。</p>
  </div>
  <div class="example color">
    <p>P 元素在在第一个样式为 class="example color" 的 Div 元素中。Div 的索引值为 0。</p>
  </div>
  <div class="example color">
    <p>P 元素在在第二个样式为 class="example color" 的 Div 元素中。Div 的索引值为 1。</p>
  </div>
  <p>点击按钮修改第一个类为 "example" 的 div 元素的背景颜色。</p>
  <button onclick="myFunction()">点我</button>
  <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
  <script>
    function myFunction() {
      var x = document.getElementsByClassName("example color");
      x[0].style.backgroundColor = "red";
    }
  </script>

</body>
</html>

尝试一下 »


查看文档中有多少个样式 class="example" 的元素 (使用 NodeList 对的 length 属性):

<div class="example">
  样式 class="example" 的 div 元
</div>
<div class="example">
  另外一个样式 class="example" 的 div 元
</div>
<p class="example">样式 class="example" 的 p 元素</p>
<p>点击按钮查看文档中有多少个类名为 "example" 的元素。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<p id="demo"></p>
<script>
  function myFunction() {
    var x = document.getElementsByClassName("example");
    document.getElementById("demo").innerHTML = x.length;
  }
</script>

尝试一下 »


修改所有样式 class="example" 元素的背景颜色：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    .example {
      border: 1px solid black;
      margin: 5px;
    }
  </style>
</head>
<body>

  <div class="example">
    样式 class="example" 的 Div 元
  </div>
  <div class="example">
    另外一个样式 class="example" 的 Div 元
  </div>
  <p class="example">样式为 class="example" 的 p 元素。</p>
  <p>这是一个插入在 p 元素中样式 class="example" 的<span class="example">span</span> 元素 。</p>
  <p>点击按钮修改所有样式 class="example" 的背景颜色。</p>
  <button class="example" onclick="myFunction()">点我</button>
  <p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
  <script>
    function myFunction() {
      var x = document.getElementsByClassName("example");
      var i;
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
      }
    }
  </script>

</body>
</html>

尝试一下 »

相关页面

CSS 教程: CSS 选择器

CSS 参考手册: CSS .class 选择器

HTML DOM 参考手册: element.getElementsByClassName()

HTML DOM 参考手册: className 属性

HTML DOM 参考手册: HTML DOM classList 属性

HTML DOM 参考手册: HTML DOM Style 对象

Document 对象参考手册 Document 对象