Document.getElementsByClassName()

返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。

语法

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
  • elements 是一个实时集合，包含了找到的所有元素。
  • names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔
  • getElementsByClassName 可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素。

示例

获取所有 class 为 'test' 的元素：

document.getElementsByClassName('test');

获取所有 class 同时包括 'red' 和 'test' 的元素。

document.getElementsByClassName('red test');

在 id 为'main'的元素的子节点中，获取所有 class 为'test'的元素

document.getElementById('main').getElementsByClassName('test');

我们还可以对任意的 HTMLCollection 使用 Array.prototype 的方法，调用时传递 HTMLCollection 作为方法的参数。这里我们将查找到所有 class 为 'test' 的 div 元素：

var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';
});

获取第一个类名为 test 的元素

这是 getElementsByClassName() 的通常用法：

<html>
<body>

    <div id="parent-id">
        <p>hello world 1</p>
        <p class="test">hello world 2</p>
        <p>hello world 3</p>
        <p>hello world 4</p>
    </div>

    <script>
        var parentDOM = document.getElementById("parent-id");

        var test = parentDOM.getElementsByClassName("test"); // 匹配类名的元素集合，不是元素本身
        console.log(test); //HTMLCollection[1]

        var testTarget = parentDOM.getElementsByClassName("test")[0]; // 我们想要取到的第一个元素
        console.log(testTarget); //<p class="test">hello world 2</p>
    </script>
</body>
</html>

多个 Class 示例

document.getElementsByClassName 的工作方式与 document.querySelector 和 document.querySelectorAll 很相似。只有所有 className 都匹配的元素会被选择。

HTML

<span class="orange fruit">Orange Fruit</span>
<span class="orange juice">Orange Juice</span>
<span class="apple juice">Apple Juice</span>
<span class="foo bar">Something Random</span>
<textarea id="resultArea" style="width:100%;height:7em"></textarea>

JavaScript

// getElementsByClassName selects partial matches
var allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
var result = "document.getElementsByClassName('orange juice')";
for (var i=0, len=allOrangeJuiceByClass.length|0; i<len; i=i+1|0) {
    result += "\n  " + allOrangeJuiceByClass[i].textContent;
}


// querySelector only selects full complete matches
var allOrangeJuiceQuery = document.querySelectorAll('.orange.juice');
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (var i=0, len=allOrangeJuiceQuery.length|0; i<len; i=i+1|0) {
    result += "\n  " + allOrangeJuiceQuery[i].textContent;
}

document.getElementById("resultArea").value = result;

结果

规范

Specification
DOM Standard
# ref-for-dom-document-getelementsbyclassname①

浏览器兼容性

BCD tables only load in the browser