如何使用 JavaScript 選擇 DOM 元素
文檔對像模型 (DOM) 是在加載文檔後由瀏覽器創建的 HTML 和 XML 文檔的編程接口。網頁本質上是由 DOM 表示為節點和對象的文檔。它允許程序操作文檔的內容、結構和样式。
在本教程中,我們將學習如何使用 JavaScript 訪問 DOM 中的不同節點(HTML 元素)。讓我們從第一種方法開始:通過 ID 獲取元素。
按 ID 獲取元素
document
的getElementById()
方法將元素 ID 作為輸入並返回 Element
表示 DOM 元素的對象。這是一個例子:
<div id="unicorn">🦄</div>
現在這裡是我們如何獲得上面的 <div>
使用其 ID 的元素:
const unicorn = document.getElementById('unicorn');
ID 區分大小寫 和獨特 跨越整個 HTML 文檔。所以這個方法總是返回一個元素。如果沒有找到匹配的元素,則返回 null
.
按標籤名稱獲取元素
getElementsByTagName()
方法用於訪問多個元素。它將標籤名稱作為輸入,並將與標籤名稱匹配的所有 DOM 元素返回為 HTMLCollection
:
<p>🐱</p>
<p>🐰</p>
<p>🐯</p>
<p>🐧</p>
訪問所有 <p>
的 JavaScript 代碼 元素:
const animals = document.getElementsByTagName('p');
此方法一次僅搜索一個標籤名稱。但是如果你傳入 *
作為標籤名稱,您將獲得 DOM 中的所有元素:
const allNodes = document.getElementsByTagName('*');
按名稱獲取元素
getElementsByName()
方法用於通過 name
獲取元素的集合 屬性,並返回一個 NodeList 對象:
<input type="text" name="email">
<input type="tel" name="phone">
<input type="date" name="dob">
讓我們獲取名稱為 email
的所有元素 :
const emails = document.getElementsByName('email');
按類名獲取元素
想用class
屬性來獲取匹配元素的列表?您可以使用 getElementsByClassName()
方法,只需傳遞一個類名(不帶 .
) 它將返回一個 HTMLCollection
具有給定類名的所有 DOM 元素:
<div class="bird owl">🦉</div>
<div class="bird">🐦</div>
<div class="bird eagle">🦅</div>
<div class="animal cat">🐱</div>
讓我們得到所有的 bird
的:
const birds = document.getElementsByClassName('bird');
此方法還接受多個由空格分隔的類名。讓我們獲取所有同時具有 bird
的元素 和 eagle
類:
const eagle = document.getElementsByClassName('bird eagle');
查詢選擇器
querySelector()
方法是兩種現代 JavaScript 方法之一,它允許您基於 CSS 選擇器從 DOM 獲取元素。只需傳入 CSS 選擇器,您將獲得與指定選擇器匹配的第一個元素。如果不存在匹配項,則返回 null
.這是一個例子:
const email = document.querySelector('#signup input[name="email"]');
查詢選擇器全部
想要選擇與指定選擇器匹配的元素列表?使用 querySelectorAll()
代替方法。此方法將多個 CSS 選擇器作為輸入並返回一個 NodeList — 與給定選擇器匹配的 DOM 元素列表。讓我們選擇所有具有 bird
類的元素 或 animal
來自上面的 HTML 標記:
const elems = document.querySelectorAll('.bird, .animal');
console.log(elems.length); // 4
函數鏈
您還可以將多個函數鏈接在一起以在另一個元素中搜索元素。您首先需要使用 getElementById()
選擇單個元素 或 querySelector()
,然後鏈接另一個函數在其中進行搜索:
<form id="signup">
<input type="text" name="email">
<input type="tel" name="phone">
<input type="date" name="date-of-birth">
</form>
獲取所有input
元素,在 ID 為 signup
的元素內 :
const inputs = document.getElementById('signup').getElementsByTagName('input');
// OR
const inputs = document.querySelector('#signup').querySelectorAll('input');
遍歷 HTMLCollection 和 NodeList
我們上面討論的大多數方法(除了 getElementById()
和 querySelector()
) 以 HTMLCollection
的形式返回多個元素 或 NodeList
.
HTMLCollection
不是數組,而是元素的通用集合。所以不可能用 forEach()
對其進行迭代 或 map()
.但是,我們可以將其轉換為真正的數組,然後使用 Array.from()
進行迭代 方法:
const inputs = document.getElementById('signup').getElementsByTagName('input');
// iterate over HTMLCollection
Array.from(inputs).forEach(element => {
console.log(element);
});
雖然 NodeList
也不是數組,但它確實提供了 forEach()
遍曆元素的方法:
const inputs = document.querySelector('#signup').querySelectorAll('input');
//iterate over NodeList
inputs.forEach(element => {
console.log(element);
});
結論
這就是使用 JavaScript 獲取 DOM 元素的全部內容。我們已經學習了很多不同的方法來訪問 DOM 元素:使用 id
屬性,HTML 標籤名稱,name
屬性,class
屬性和 CSS 選擇器。我們還討論了迭代這些方法返回的通用元素集合的方法。