Document.getElementsByClassName()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-tw/web/api/document/index.md)

針對所有給定的 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>

瀏覽器相容性

BCD tables only load in the browser

規範

W3C: getElementsByClassName