Element.getElementsByClassName()

在此页

句法
用法注意事项
范例
规范
浏览器兼容性
相关话题

元素 方法 getElementsByClassName() returns a live HTMLCollection which contains every descendant element which has the specified class name or names.

方法 getElementsByClassName() 在 Document interface works essentially the same way, except it acts on the entire document, starting at the document root.

句法

var elements = element.getElementsByClassName(names);

参数

名称: DOMString containing one or more class names to match on, separated by whitespace.

返回值

HTMLCollection providing a live-updating list of every element which is a member of every class in 名称 .

用法注意事项

As always, the returned collection is live , meaning that it always reflects the current state of the DOM tree rooted at the element on which the function was called. As new elements that match 名称 are added to the subtree, they immediately appear in the collection. Similarly, if an existing element that doesn't match 名称 has its set of classes adjusted so that it matches, it immediately appears in the collection.

The opposite is also true; as elements no longer match the set of names, they are immediately removed from the collection.

在 quirks mode , the class names are compared in a case-insensitive fashion. Otherwise, they're case sensitive.

范例

Matching a single class

To look for elements that include among their classes a single specified class, we just provide that class name when calling getElementsByClassName() :

element.getElementsByClassName('test');

This example finds all elements that have a class of test , which are also a descendant of the element that has the id of main :

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

Matching multiple classes

To find elements whose class lists include both the red and test 类：

element.getElementsByClassName('red test');

Examining the results

You can use either the item() method on the returned HTMLCollection or standard array syntax to examine individual elements in the collection. However the following code will not work as one might expect because "matches" will change as soon as any "colorbox" class is removed.

var matches = element.getElementsByClassName('colorbox');
for (var i=0; i<matches.length; i++) {
  matches[i].classList.remove('colorbox');
  matches.item(i).classList.add('hueframe');
}

Instead, use another method, such as:

var matches = element.getElementsByClassName('colorbox');
while (matches.length > 0) {
  matches.item(0).classList.add('hueframe');
  matches[0].classList.remove('colorbox');
}

This code finds descendant elements with the "colorbox" class, adds the class "hueframe" , by calling item(0), then removes "colorbox" (using array notation). Another element (if any are left) will then become item(0) .

Filtering the results using array methods

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';
});

规范

规范	状态	注释
DOM The definition of 'Element.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 18 18 不支持 12 — 18 This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function.	Firefox 3 3 Prior to Firefox 19, this method was returning a `NodeList` ; it was then changed to reflect the change in the spec.	IE 9 9 This function is implemented in the `HTMLElement` API, meaning non-HTML elements (like SVG elements) cannot use this function.	Opera 9.5	Safari 6	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 6	Samsung Internet Android 1.0

图例

完整支持

元数据

最后修改： Aug 27, 2020

在此页

句法

参数

返回值