Document.getElementsByClassName()

在此页

句法
范例
规范
浏览器兼容性
相关话题

getElementsByClassName 方法为 Document interface returns an array-like object of all child elements which have all of the given class name(s). When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class name(s).

句法

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

元素 是实时 HTMLCollection of found elements.
名称 is a string representing the class name(s) to match; multiple class names are separated by whitespace
getElementsByClassName can be called on any element, not only on the document . The element on which it is called will be used as the root of the search.

范例

Get all elements that have a class of 'test':

document.getElementsByClassName('test')

Get all elements that have both the 'red' and 'test' classes:

document.getElementsByClassName('red test')

Get all elements that have a class of 'test', inside of an element that has the ID of 'main':

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

Get the first element with a class of 'test', or undefined if there is no matching element:

document.getElementsByClassName('test')[0]

We can also use methods of Array.prototype on any HTMLCollection by passing the HTMLCollection as the method's this value. Here we'll find all div elements that have a class of 'test':

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

Get the first element whose class is 'test'

This is the most commonly used method of operation.

<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"); // a list of matching elements, *not* the element itself
        console.log(test); //HTMLCollection[1]
        var testTarget = parentDOM.getElementsByClassName("test")[0]; // the first element, as we wanted
        console.log(testTarget); //<p class="test">hello world 2</p>
    </script>
</body>
</html>

Multiple Classes Example

document.getElementsByClassName works very similarly to document.querySelector and document.querySelectorAll . Only elements with ALL of the classNames specified are selected.

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:98%;height:7em"></textarea>

JavaScript

// getElementsByClassName only selects elements that have both given classes
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;

结果

规范

规范	状态	注释
DOM The definition of 'document.getElementsByClassName' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`getElementsByClassName`	Chrome 1	Edge 12	Firefox 4	IE 9	Opera 9.5	Safari 3.1	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 2	Samsung Internet Android 1.0

图例

完整支持

元数据

最后修改： Mar 17, 2020

在此页

句法

范例

Get the first element whose class is 'test'

Multiple Classes Example

HTML

JavaScript

结果

规范

浏览器兼容性

图例

相关话题