Element：getElementsByClassName() 方法
Element 方法 getElementsByClassName() 返回一個即時 HTMLCollection，其中包含具有指定類名或類名的所有後代元素。
Document 介面上的方法 getElementsByClassName() 的工作方式基本相同，只是它作用於整個文件，從文件根目錄開始。
語法
getElementsByClassName(names)
引數
names-
一個包含一個或多個要匹配的類名的字串，用空格分隔。
返回值
一個 HTMLCollection，提供一個即時更新的列表，其中包含 names 中所有類的成員的每個元素。
用法說明
一如既往，返回的集合是即時的，這意味著它始終反映函式呼叫時所作用的元素所關聯的 DOM 樹的當前狀態。當匹配 names 的新元素被新增到子樹中時，它們會立即出現在集合中。同樣，如果一個現有元素不再匹配 names，並且其類集被調整為匹配，它也會立即出現在集合中。
反之亦然；當元素不再匹配類名集時，它們會立即從集合中刪除。
注意： 在 混雜模式下，類名比較是不區分大小寫的。否則，它們是區分大小寫的。
示例
匹配單個類
要查詢包含單個指定類的元素，我們在呼叫 getElementsByClassName() 時僅提供該類名。
element.getElementsByClassName("test");
此示例查詢所有具有 test 類的元素，這些元素也是 id 為 main 的元素的後代。
document.getElementById("main").getElementsByClassName("test");
匹配多個類
查詢類列表中同時包含 red 和 test 類的元素。
element.getElementsByClassName("red test");
檢查結果
您可以使用返回的 HTMLCollection 上的 item() 方法或標準的陣列語法來檢查集合中的單個元素。但是，下面的程式碼可能不會按預期工作，因為只要刪除了任何 "color-box" 類，"matches" 就會改變。
const matches = element.getElementsByClassName("color-box");
for (let i = 0; i < matches.length; i++) {
matches[i].classList.remove("color-box");
matches.item(i).classList.add("hue-frame");
}
改為使用其他方法，例如
const matches = element.getElementsByClassName("color-box");
while (matches.length > 0) {
matches.item(0).classList.add("hue-frame");
matches[0].classList.remove("color-box");
}
此程式碼查詢具有 "color-box" 類的後代元素，透過呼叫 item(0) 新增 "hue-frame" 類，然後刪除 "color-box"（使用陣列表示法）。另一個元素（如果還有剩餘）將成為 item(0)。
使用陣列方法過濾結果
我們還可以透過將 HTMLCollection 作為方法的 this 值來在任何 HTMLCollection 上使用 Array 方法。這裡我們將查詢所有具有 test 類的 <div> 元素。
const testElements = document.getElementsByClassName("test");
const testDivs = Array.prototype.filter.call(
testElements,
(testElement) => testElement.nodeName === "DIV",
);
規範
| 規範 |
|---|
| DOM # ref-for-dom-element-getelementsbyclassname |
瀏覽器相容性
載入中…