在 JavaScript 中根據類名獲取元素

Nithin Krishnan 2023年1月30日 2021年11月20日
  1. 使用 Javascript .getElementsByClassName() 函式根據其 CSS 類名稱獲取元素
  2. 使用 Javascript .querySelector() 函式獲取基於 CSS 類名的元素
  3. 使用 .querySelectorAll() 函式根據 CSS 類名獲取多個 HTML 元素
在 JavaScript 中根據類名獲取元素

我們可能需要從 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