如何訪問 DOM 中的元素
本文最初是為 DigitalOcean 編寫的 .
簡介
在了解 DOM 樹和節點中，我們討論了 DOM 是如何構建為稱為節點的對象樹的，並且節點可以是文本、註釋或元素。通常我們在訪問DOM中的內容時，都會通過一個HTML元素節點。
為了精通訪問 DOM 中的元素，必須具備 CSS 選擇器、語法和術語的工作知識以及對 HTML 元素的理解。在本教程中，我們將介紹幾種訪問 DOM 中元素的方法：通過 ID、類、標籤和查詢選擇器。
概覽
這是我們將在本教程中介紹的五種方法的表格概述。
| 獲取 | 選擇器語法 | 方法 |
|---|---|---|
| ID | #demo | getElementById() |
| 類 | .demo | getElementsByClassName() |
| 標籤 | demo | getElementsByTagName() |
| 選擇器（單個） | querySelector() | |
| 選擇器（全部） | querySelectorAll() |
在學習 DOM 時，務必在自己的計算機上鍵入示例，以確保您理解並保留所學信息。
你可以保存這個 HTML 文件，access.html , 到您自己的項目中，與本文一起完成示例。如果您不確定如何在本地使用 JavaScript 和 HTML，請查看我們的如何將 JavaScript 添加到 HTML 教程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accessing Elements in the DOM</title>
<style>
html {
font-family: sans-serif;
color: #333;
}
body {
max-width: 500px;
margin: 0 auto;
padding: 0 15px;
}
div,
article {
padding: 10px;
margin: 5px;
border: 1px solid #dedede;
}
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
</body>
</html>
在這個 HTML 文件中，我們有許多元素，我們將使用不同的 document 訪問它們 方法。當我們在瀏覽器中渲染文件時，它看起來類似於這樣：
我們將使用上面概述中概述的不同方法來訪問文件中的可用元素。
按 ID 訪問元素
訪問 DOM 中單個元素的最簡單方法是通過其唯一 ID。我們可以使用 getElementById() 通過 ID 獲取元素 document 的方法 對象。
document.getElementById()
為了通過 ID 訪問，HTML 元素必須有一個 id 屬性。我們有一個 div ID 為 demo 的元素 .
<div id="demo">Access me by ID</div>
在控制台中 ，讓我們獲取元素並將其分配給 demoId 變量。
const demoId = document.getElementById('demo');
記錄 demoId 到控制台將返回我們的整個 HTML 元素。
console.log(demoId);<div id="demo">Access me by ID</div>
我們可以通過更改 border 來確定我們正在訪問正確的元素 purple 的屬性 .
demoId.style.border = '1px solid purple';完成後，我們的實時頁面將如下所示：
通過 ID 訪問元素是一種在 DOM 中快速獲取元素的有效方法。但是，它有缺點； ID 必須始終對頁面唯一，因此您一次只能使用 getElementById() 訪問單個元素 方法。如果你想為整個頁面的許多元素添加一個函數，你的代碼很快就會變得重複。
按類訪問元素
class 屬性用於訪問 DOM 中的一個或多個特定元素。我們可以使用 getElementsByClassName() 獲取具有給定類名的所有元素 方法。
document.getElementsByClassName()
現在我們要訪問多個元素，在我們的示例中，我們有兩個帶有 demo 的元素 類。
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
讓我們在 Console 中訪問我們的元素 並將它們放入一個名為 demoClass 的變量中 .
const demoClass = document.getElementsByClassName('demo');
此時，您可能認為可以像使用 ID 示例一樣修改元素。但是，如果我們嘗試運行以下代碼並更改 border 類演示元素的屬性為橙色，我們會得到一個錯誤。
demoClass.style.border = '1px solid orange';Uncaught TypeError: Cannot set property 'border' of undefined這行不通的原因是，我們不是只獲取一個元素，而是有一個類似數組的元素對象。
console.log(demoClass);(2) [div.demo, div.demo]
必須使用索引號訪問 JavaScript 數組。因此，我們可以使用 0 的索引來更改該數組的第一個元素 .
demoClass[0].style.border = '1px solid orange';
通常，當按類訪問元素時，我們希望將更改應用於文檔中具有該特定類的所有元素，而不僅僅是一個。我們可以通過創建一個 for 循環，遍歷數組中的每一項。
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}當我們運行這段代碼時，我們的實時頁面將呈現如下：
我們現在已經選擇了頁面上具有 demo 的每個元素 類，並更改了 border orange 的屬性 .
按標籤訪問元素
訪問頁面上多個元素的一種不太具體的方法是通過其 HTML 標記名稱。我們使用 getElementsByTagName() 按標籤訪問元素 方法。
document.getElementsByTagName()
對於我們的標籤示例，我們使用 article 元素。
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
就像通過類訪問元素一樣，getElementsByTagName() 將返回一個類似數組的元素對象，我們可以使用 for 修改文檔中的每個標籤 循環。
const demoTag = document.getElementsByTagName('article');
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}運行代碼後，實時頁面將被修改如下：
循環改變了 border 所有 article 的屬性 blue 的元素 .
查詢選擇器
如果您對 jQuery API 有任何經驗，您可能熟悉 jQuery 使用 CSS 選擇器訪問 DOM 的方法。
$('#demo') // returns the demo ID element in jQuery
我們可以用 querySelector() 在純 JavaScript 中做同樣的事情 和 querySelectorAll() 方法。
document.querySelector()
document.querySelectorAll()
要訪問單個元素，我們將使用 querySelector() 方法。在我們的 HTML 文件中，我們有一個 demo-query 元素
<div id="demo-query">Access me by query</div>
id 的選擇器 屬性是哈希符號（# ）。我們可以使用 demo-query 分配元素 id 到 demoQuery 變量。
const demoQuery = document.querySelector('#demo-query');
對於具有多個元素的選擇器，例如類或標籤，querySelector() 將返回與查詢匹配的第一個元素。我們可以使用 querySelectorAll() 方法來收集與特定查詢匹配的所有元素。
在我們的示例文件中，我們有兩個帶有 demo-query-all 的元素 應用於他們的類。
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
class 的選擇器 屬性是句點或句號（. )，因此我們可以使用 .demo-query-all 訪問該類 .
const demoQueryAll = document.querySelectorAll('.demo-query-all');
使用 forEach() 方法，我們可以應用顏色 green 到 border 所有匹配元素的屬性。
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});
使用 querySelector() , 逗號分隔值用作 OR 運算符。例如，querySelector('div, article') 將匹配 div 或 article ，以文檔中最先出現的為準。使用 querySelectorAll() , 逗號分隔值用作 AND 運算符，以及 querySelectorAll('div, article') 將匹配所有 div 和 article 文檔中的值。
使用查詢選擇器方法非常強大，因為您可以像訪問 CSS 文件一樣訪問 DOM 中的任何元素或元素組。有關選擇器的完整列表，請查看 Mozilla 開發者網絡上的 CSS 選擇器。
完整的 JavaScript 代碼
下面是我們上面所做工作的完整腳本。您可以使用它來訪問我們示例頁面上的所有元素。將文件另存為 access.js 並在關閉 body 之前將其加載到 HTML 文件中 標記。
// Assign all elements
const demoId = document.getElementById('demo')
const demoClass = document.getElementsByClassName('demo')
const demoTag = document.getElementsByTagName('article')
const demoQuery = document.querySelector('#demo-query')
const demoQueryAll = document.querySelectorAll('.demo-query-all')
// Change border of ID demo to purple
demoId.style.border = '1px solid purple'
// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange'
}
// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue'
}
// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red'
// Change border of class query-all to green
demoQueryAll.forEach((query) => {
query.style.border = '1px solid green'
})您可以通過訪問 HTML 元素繼續處理這些模板文件以進行其他更改。
結論
在本教程中，我們介紹了 5 種訪問 DOM 中的 HTML 元素的方法——按 ID、按類、按 HTML 標記名稱和按選擇器。您將用於獲取一個元素或一組元素的方法將取決於瀏覽器支持以及您將要操作的元素數量。您現在應該可以放心地使用 JavaScript 通過 DOM 訪問文檔中的任何 HTML 元素了。
