針對所有給定的 class 子元素，回傳類似陣列的物件。當呼叫 document 物件時，它會搜尋整個文件，包括根節點在內。你也可以在所有元素呼叫 getElementsByClassName()，那它就只會回傳含有給定 class 的特定根元素的後代元素。
表達式
var elements = document.getElementsByClassName(names); // or: var elements = rootElement.getElementsByClassName(names);
- elements 為符合 class 名稱的
HTMLCollection。 - names 為符合 class 名稱的字串；class 名稱可以用空白分隔。
- getElementsByClassName 可以被任何不只在 document 的元素呼叫。呼叫這個方法的元素將會成為搜尋 class 的根元素。
範例
取得所有 class 為 “test” 的元素：
document.getElementsByClassName('test');
取得所有 class 為 “test” 和 “red” 的元素：
document.getElementsByClassName('red test');
取得所有在 id 為 '“main” 的元素裡 class 為 “test” 的元素：
document.getElementById('main').getElementsByClassName('test');
我們也可以藉由傳遞 HTMLCollection 為 this 來使用 Array.prototype 的方法。下面的例子將會找到所有 class 為 “test” 的 div 元素：
var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
return testElement.nodeName === 'DIV';
});
取得 class 是 test 的元素
這是最常用的操作方法：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="parent-id">
<p>hello word1</p>
<p class="test">hello word2</p>
<p>hello word3</p>
<p>hello word4</p>
</div>
<script>
var parentDOM = document.getElementById("parent-id");
var test=parentDOM.getElementsByClassName("test");//test is not target element
console.log(test);//HTMLCollection[1]
var testTarget=parentDOM.getElementsByClassName("test")[0];//year , this element is target
console.log(testTarget);//<p class="test">hello word2</p>
</script>
</body>
</html>
瀏覽器相容性
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | 3.0 | 9.0 | (Yes) | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |