在 JavaScript 中根據類名獲取元素
-
使用 Javascript
.getElementsByClassName()函式根據其 CSS 類名稱獲取元素 -
使用 Javascript
.querySelector()函式獲取基於 CSS 類名的元素 -
使用
.querySelectorAll()函式根據 CSS 類名獲取多個 HTML 元素
我們可能需要從 DOM 中查詢元素以在執行時動態更改其樣式。Javascript 有各種內建函式可以滿足我們的目的。其中最著名的是 .getElementById()。但是 .getElementById() 僅返回一個元素，即第一個元素，其 HTML id 與傳遞給函式的引數相匹配。如果我們要同時更改多個元素的樣式，.getElementById() 函式方法可能會很麻煩。它將涉及向 HTML 元素新增多個 id 並一次查詢一個。我們能否以更好的方式做到這一點？以下部分詳細說明了根據 DOM 的 CSS 類名從 DOM 中獲取元素的方法。
使用 Javascript .getElementsByClassName() 函式根據其 CSS 類名稱獲取元素
Javascript 有一個內建方法 .getElementsByClassName()，它使我們能夠根據 CSS 類名查詢多個 HTML 元素。它是 Document 介面中可用的方法，通常用於它，如 document.getElementsByClassName()。該函式將在文件（DOM）中搜尋具有函式引數中指定的 CSS 類名稱的所有元素。
根據 MDN Docs，該函式返回 HTML 元素的實時集合。這意味著如果有直接修改 DOM 元素的程式碼片段，則 getElementsByClassName() 函式返回的元素可能會在執行時被修改。
getElementsByClassName 語法
let el = document.getElementsByClassName(cssClassName);
cssClassName 應該是表示所需 CSS 類的字串。如果有多個 CSS 類，我們可以用空格分隔它們（如 css-class1 css-class2 等）
getElementsByClassName 引數
該函式採用一個引數，即 CSS 類名。在某些情況下，我們可能需要 CSS 類名稱的組合來選擇一個元素。在這種情況下，我們可以傳遞多個以空格分隔的 CSS 類名。
例子
讓我們參考以下程式碼來了解其功能。
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.getElementsByClassName('bold');
console.log(els);
}
輸出：
HTMLCollection(2) [div.bold, div.bold]
上面的程式碼將在控制檯中記錄一組 HTML 元素。谷歌瀏覽器控制檯將顯示如上所示的輸出。在 window.onload 中編寫 document.getElementsByClassName("bold") 程式碼可確保程式碼僅在 HTML 呈現後執行。請注意，與 .getElementById() 函式不同，getElementsByClassName() 函式會重新執行 HTML 元素陣列。我們不能像處理 .getElementById() 那樣直接處理由 getElementsByClassName() 輸出的元素。如果我們要將上面程式碼中的 bold 樣式更改為第一個元素的普通樣式，我們可以使用以下程式碼。
let els = document.getElementsByClassName('bold');
els[0].style.fontWeight = '100';
使用 Javascript .querySelector() 函式獲取基於 CSS 類名的元素
getElementsByClassName() 是一種廣泛使用的方法，僅限於根據 CSS 類名選擇 HTML 元素。Javascript 在 Document 介面中有另一個可用的內建函式，querySelector()，它本質上更通用。它可用於根據元素的 CSS 類名查詢元素。此功能只是 querySelector() 實際功能的一個子集。Javascript querySelector() 函式與 .getElementById() 類似，因為它返回滿足在其引數中傳遞的選擇引數的第一個元素。
.querySelector() 語法
語法類似於 .getElementsByClassName()。
let el = document.querySelector('.cssQuerySelector');
.querySelector() 引數
querySelector() 接受字串資料型別作為表示 css 查詢選擇器 的引數。與我們使用 CSS 選擇器將特定樣式應用於所選元素的方式相同。它包括 #<id> 根據其 id 選擇一個 HTML 元素，.<css-class-name> 根據其 CSS 樣式類名稱選擇一個元素，甚至是兩者的組合，如 #<id>.<css-class-name>，可以用來選擇一個元素。
例子
下面的程式碼解釋了 .querySelector() 的用法。
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
window.onload = function() {
let els = document.querySelector('.bold');
console.log(els);
}
輸出：
<div class="bold">Element 1: Bolder text</div>
輸出與在 google chrome 瀏覽器控制檯中顯示的一樣。請注意，.querySelector() 函式只返回一個 HTML 元素，而 .getElementsByClassName() 則返回一組元素。因此，如果我們要處理它，我們可以直接將更改應用於它。比如我們要把選中元素的字型改成普通字型，可以用下面的程式碼來實現。
window.onload = function() {
let els = document.querySelector('.bold');
els.style.fontWeight = '100';
}
使用 .querySelectorAll() 函式根據 CSS 類名獲取多個 HTML 元素
顧名思義，Javascript 中的 .querySelectorAll() 函式返回滿足選擇條件的 HTML 元素集合。就像 .querySelector() 一樣，querySelectorAll() 接受 CSS 查詢選擇器字串作為其引數。它返回非活動的 HTML 元素的靜態列表。它的行為類似於 .getElementsByClassName()，因為它返回基於它查詢的多個 HTML 元素，但不限於它。就像 querySelector() 一樣，我們可以使用 .querySelectorAll() 根據元素的 id 或 CSS 類名來獲取元素。就像我們在 CSS 樣式表中使用查詢選擇器選擇元素一樣。
.querySelectorAll() 語法
document.querySelectorAll('<css-selector-string>');
.querySelectorAll() 引數
該函式接受一個 CSS 查詢字串作為其唯一的輸入引數。要根據 id 選擇元素，我們必須使用引數 #<id>。對於基於 CSS 類名的選擇，它應該是 .<css-class-name>。對於兩者的組合，我們可以使用 #<id>.<css-class-name> 格式。
例子
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
console.log(els);
輸出：
NodeList(2)
0: div.bold
1: div.bold
輸出是一個節點列表型別的陣列。我們可以通過從陣列中選擇它們並根據需要更改它們的 CSS 類值來進一步處理這些節點。一個示例如以下程式碼所示。els[0].style.fontWeight = "100"; 將使第一個選定的 HTML 節點變為正常字型粗細。
<div class="bold">Element 1: Bolder text</div>
<div class="green">Green text</div>
<div class="bold">Element 2: Bolder text</div>
let els = document.querySelectorAll('.bold');
els[0].style.fontWeight = '100';
console.log(els);
輸出：
NodeList(2)
0: div.bold
1: div.bold