如何使用 JavaScript 更改元素的類 - className 和 classList
簡介
類 HTML 中的屬性用於為一個或多個 HTML 元素定義一個類。這樣，很多元素可以屬於同一個元素類 並在樣式表中共享相同的樣式，因此您不必一遍又一遍地為每個元素編寫相同的樣式。
話雖如此，有時您想動態地更改樣式 ，取決於用戶的輸入。例如，您想為您的網頁實現晝夜模式，這可以通過更改元素的類來有效地完成。
當您想讓用戶自定義應用程序的任何方面時，這是一項常見任務。在本指南中 - 我們將了解 如何在 JavaScript 中更改 HTML 元素的類 .
DOM 樹
DOM 或文檔對像模型 是一個從 XML 或 HTML 創建樹結構的接口。文檔元素的層次結構通過 DOM 表示 .樹由節點和分支組成，其中元素是節點，元素的關係是分支。在DOM Tree中，根節點是html - 開始標記 HTML 文檔所必需的第一個元素：
<!DOCTYPE HTML>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Some heading</h1>
</body>
</html>
該頁面的 DOM 樹如下所示：
這是一個非常簡單的樹，但同樣的過程適用於任意複雜的頁面。感謝 DOM 樹，通過 JavaScript，我們可以訪問頁面上的所有 HTML 元素，以及元素的類、id、內容及其所有屬性。我們甚至可以添加新元素並刪除舊元素。我們可以創建事件來監聽和響應它們（即當點擊按鈕時改變背景顏色）。
獲取元素
現在我們知道我們可以 從 HTML 中獲取一個元素，讓我們看看如何真正做 使用 JavaScript。要更改元素的類，我們首先必須檢索它。根據元素的不同，我們可以通過幾種不同的方法來獲取它們：
getElementsByClassName(class_name)- 返回一個HTMLCollection其中包含類名等於class_name的 HTML 元素 .getElementById(id_name)- 返回一個 id 等於id_name的 HTML 元素 .getElementsByTagName(tag_name)- 返回一個HTMLCollection帶有標籤tag_name的元素 .
我們將使用這個 HTML 文件：
<!DOCTYPE HTML>
<html>
<head>
<title>Web page title</title>
</head>
<body class="page-body">
<h1 class="headings">Some heading</h1>
<h3 class="headings">More of some heading</h3>
<h5 class="headings">Another heading here</h5>
<a href="https://www.google.com" id="link-to-google">Some random link</a>
<ul>
<li>Thing #1</li>
<li>Thing #2</li>
<li>Thing #3</li>
</ul>
</body>
<script src="script.js"></script>
</html>
使用getElementsByClassName()獲取元素
讓我們製作 script.js 導入到我們頁面的文件：
$ touch script.js
在其中 - 我們將定位並檢索屬於“標題”class 的元素 ：
console.log(document.getElementsByClassName("headings"));
由於可能有多個元素屬於同一類 - 這將返回 HTMLCollection ：
HTMLCollection(3)
- 0: h1.headings
- 1: h3.headings
- 2: h5.headings
length: 3
一個 HTMLCollection 是一個 HTML 元素的集合，它提供了多種從集合中選擇它們的方法，例如：
className()- 返回一個代表類名的字符串；這個方法也可以用來設置一個元素的類（這正是我們所需要的）。innerHTML()- 由於 HTML 元素可以相互嵌套，如果有嵌套元素，該方法會將它們作為 HTML 返回。innerText()- 返回元素內的所有文本（包括嵌套元素）。
還有很多我們可以監聽的事件，比如：onclick , ondblclick , onkeydown , onkeypress .您可以在官方文檔中找到更多關於 JavaScript 事件的信息。
使用getElementById()獲取元素
您可以通過元素的 id 抓取元素 ，通過 getElementById() 方法：
console.log(document.getElementById("link-to-google"));
結果是：
<a href="https://www.google.com" id="link-to-google">Some random link</a>
使用getElementsByTagName()獲取元素
最後，我們還可以通過tag找到元素 ，如果他們沒有班級或身份證。這會返回一個 HTML 元素的集合，因為通常會有多個具有相同標籤的元素。
現在，如果我們想獲得所有的 <li> 元素，我們可以通過 li 搜索 標籤：
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
console.log(document.getElementsByTagName("li"));
結果是：
HTMLCollection(3) [li, li, li]
- 0: li
- 1: li
- 2: li
返回值與getElementsByClassName相同 - HTMLCollection .
不管用於獲取元素的方法是什麼——我們現在都可以更改它的類。
使用 JavaScript 更改元素的類
用 className 改變元素類
讓我們創建一個虛擬 index.html 包含一些數據的頁面。我們將允許用戶在“白天模式”和“夜間模式”之間切換，這會改變網頁上使用的調色板。我們還需要一個 script.js 此處導入的文件，用於查找和更改元素，以及 style.css 包含我們所有樣式代碼的文件。
讓我們從 index.html 開始 ：
<!DOCTYPE HTML>
<html>
<head>
<title>Day/night mode</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body class="page-body-day" id="page-body">
<h1 class="main-heading-day" id="main-heading">Some heading</h1>
<p>Dummy text, dummy text, dummy text</p>
<p>Some more dummy text, more dummy text, more dummy text</p>
<button onclick="switchMode()">Switch day/night mode</button>
</body>
<script src="script.js"></script>
</html>
當用戶點擊切換日/夜模式時所有將改變其外觀的元素 按鈕有各自的id s 並被分配默認的 element-day 分別上課。
每個element-day 類有一個 element-night style.css 中的替代方案 文件：
.page-body-day {
background-color: white;
color: black;
}
.page-body-night {
background-color: #02182B;
color: yellow;
}
.main-heading-day {
color: black;
}
.main-heading-night {
color: yellow;
}
因為我們將改變班級 在我們的元素中，我們不想按類搜索 ，否則，我們將有邊緣情況。我們會想通過 fixed 的東西進行搜索 值，即 id ，然後檢查 className 該元素的 - 在此過程中將其更改為適當的類：
function switchMode(){
// Body switching
if(document.getElementById("page-body").className == "page-body-day"){
document.getElementById("page-body").className = "page-body-night";
}else{
document.getElementById("page-body").className = "page-body-day";
}
// Heading switching
if(document.getElementById("main-heading").className == "main-heading-day"){
document.getElementById("main-heading").className = "main-heading-night";
}else{
document.getElementById("main-heading").className = "main-heading-day";
}
}
className 返回該元素的類的名稱。但是，如果我們為其分配一個新值 - 我們可以有效地更新 class 標籤的屬性。如果元素有 element-day 類，我們將其更改為 element-night 反之亦然。
更改body的color時 CSS 中的屬性，我們會自動更改所有沒有 color 的元素 定義的屬性（在我們的例子中是我們的 <p> 標籤）。當類切換發生時，CSS 開始讀取新切換的類並相應地應用樣式。
不過，這種方法不是很現代，主要用於適應 Internet Explorer 8 和 9 的滯後功能。
用classList改變元素類
較新的 Internet 瀏覽器支持稱為 classList 的較新屬性 .該屬性提供的是所有類的列表 應用於特定的 HTML 元素。
注意： Internet Explorer 8 和 9 不支持 classList .
classList 有幾個我們可以利用的方法：
add(class_name)- 添加一個新類class_name到列表中。remove(class_name)- 刪除一個類class_name從列表中。toggle(class_name)- 添加類class_name如果尚未添加，則將其刪除。contains(class_name)- 檢查是否class_name位於應用於 HTML 元素的類列表中。
話雖如此 - 我們可以重寫 script.js 文件改為使用這些方法：
function switchMode(){
// Body switching
if(document.getElementById("page-body").classList.contains("page-body-day")){
document.getElementById("page-body").classList.remove("page-body-day");
document.getElementById("page-body").classList.add("page-body-night");
} else{
document.getElementById("page-body").classList.remove("page-body-night");
document.getElementById("page-body").classList.add("page-body-day");
}
// Heading switching
if(document.getElementById("main-heading").classList.contains("main-heading-day")){
document.getElementById("main-heading").classList.remove("main-heading-day");
document.getElementById("main-heading").classList.add("main-heading-night");
} else{
document.getElementById("main-heading").classList.remove("main-heading-night");
document.getElementById("main-heading").classList.add("main-heading-day");
}
}
HTML5 和現代瀏覽器都支持這種方法，通過這種方式，您可以以類似於 jQuery 的方式操作類 - 一個廣泛用於操作 HTML 元素、事件等的 JavaScript 庫。
通過classList ，您可以跳過包含減少 PLT 的外部庫 （頁面加載時間） 最近已成為重要的Web Vital SEO分級的信號。
結論
JavaScript 獲得了廣泛的採用，因為 DOM 使得它可以簡單地操作網頁上的所有內容，除其他外。
在本教程中，我們了解了如何在 JavaScript 中更改元素的類 .
