在 JavaScript 中，要想對(duì)網(wǎng)頁(yè)元素進(jìn)行操作——無(wú)論是修改內(nèi)容、調(diào)整樣式還是響應(yīng)用戶交互——第一步永遠(yuǎn)是找到這個(gè)元素。這就需要我們熟練掌握從 DOM 樹(shù)中獲取特定元素的方法。本文將詳細(xì)介紹五種最常用、最重要的 DOM 查詢方法，助你輕松定位目標(biāo)元素。

1. 根據(jù) ID 獲取元素：getElementById

這是最常見(jiàn)、最快速的查找方式。因?yàn)?HTML 規(guī)范要求 id 在整個(gè)文檔中必須是唯一的，所以此方法只返回一個(gè)元素。

• 語(yǔ)法: document.getElementById(idString)
• 參數(shù): idString - 一個(gè)字符串，對(duì)應(yīng)目標(biāo)元素的 id 屬性值。
• 返回值: 匹配的 Element 對(duì)象，若未找到則返回 null。

// HTML: <div id="main-content">...</div>
const mainDiv = document.getElementById('main-content');
if (mainDiv) { // 檢查元素是否存在
  console.log(mainDiv.textContent); // 操作元素
}

2. 根據(jù)標(biāo)簽名獲取元素：getElementsByTagName

獲取指定標(biāo)簽名的所有元素。

• 語(yǔ)法: document.getElementsByTagName(tagName)
• 參數(shù): tagName - 一個(gè)字符串，表示要匹配的標(biāo)簽名（如 'div', 'p', 'a'）。傳入 '*' 可獲取所有元素。
• 返回值: 一個(gè) HTMLCollection 對(duì)象（類(lèi)數(shù)組對(duì)象），包含所有匹配的元素。

// HTML: <p>Paragraph 1</p> <p>Paragraph 2</p>
const allParagraphs = document.getElementsByTagName('p');
console.log(allParagraphs.length); // 輸出: 2
for (let i = 0; i < allParagraphs.length; i++) {
  allParagraphs[i].style.color = 'blue'; // 批量修改樣式
}

3. 根據(jù)類(lèi)名獲取元素：getElementsByClassName

獲取具有指定 class 名的所有元素。

• 語(yǔ)法: document.getElementsByClassName(className)
• 參數(shù): className - 一個(gè)字符串，表示要匹配的 class 屬性值。
• 返回值: 一個(gè) HTMLCollection 對(duì)象，包含所有匹配的元素。

// HTML: <span class="highlight">Text A</span> <div class="highlight">Text B</div>
const highlightedElements = document.getElementsByClassName('highlight');
Array.from(highlightedElements).forEach(el => {
  el.style.backgroundColor = 'yellow'; // 使用 Array.from 將 HTMLCollection 轉(zhuǎn)換為數(shù)組以便使用 forEach
});

4. 根據(jù)name屬性獲取元素：getElementsByName

主要用于獲取具有特定 name 屬性的元素（常見(jiàn)于表單控件）。

• 語(yǔ)法: document.getElementsByName(name)
• 參數(shù): name - 一個(gè)字符串，表示要匹配的 name 屬性值。
• 返回值: 一個(gè) NodeList 對(duì)象，包含所有匹配的元素。

// HTML: <input name="username" type="text"> <input name="password" type="password">
const usernameInputs = document.getElementsByName('username');
console.log(usernameInputs[0].value); // 獲取用戶名輸入框的值

5. 使用 CSS 選擇器獲取元素：querySelector和querySelectorAll

這是最強(qiáng)大、最靈活的查詢方式，支持標(biāo)準(zhǔn)的 CSS 選擇器語(yǔ)法。

5.1. 獲取第一個(gè)匹配元素：querySelector

• 語(yǔ)法: document.querySelector(selectors)
• 參數(shù): selectors - 一個(gè)字符串，包含一個(gè)或多個(gè) CSS 選擇器（如 '.my-class', '#my-id', 'div > p', 'input[type="text"]' 等）。
• 返回值: 匹配指定選擇器的第一個(gè) Element 對(duì)象，若未找到則返回 null。

// HTML: <div class="container"><p class="intro">Hello</p><p>World</p></div>
const firstIntroParagraph = document.querySelector('.intro'); // 獲取第一個(gè) class 為 intro 的 p 元素
console.log(firstIntroParagraph.textContent); // 輸出: Hello

const firstDivWithContainerClass = document.querySelector('div.container'); // 獲取第一個(gè) class 為 container 的 div

5.2. 獲取所有匹配元素：querySelectorAll

• 語(yǔ)法: document.querySelectorAll(selectors)
• 參數(shù): selectors - 一個(gè)字符串，包含一個(gè)或多個(gè) CSS 選擇器。
• 返回值: 一個(gè) NodeList 對(duì)象，包含所有匹配指定選擇器的 Element 對(duì)象。

// HTML: <p class="note">Note 1</p> <aside class="note">Note 2</aside>
const allNotes = document.querySelectorAll('.note'); // 獲取所有 class 為 note 的元素
allNotes.forEach(note => {
  note.style.border = '1px solid green';
});

HTMLCollectionvsNodeList

• HTMLCollection (來(lái)自 getElementsBy... 方法): 是一個(gè)動(dòng)態(tài)集合。當(dāng) DOM 結(jié)構(gòu)發(fā)生變化（如添加或刪除了匹配的元素），這個(gè)集合會(huì)自動(dòng)更新。
• NodeList (來(lái)自 querySelectorAll): 是一個(gè)靜態(tài)（快照）集合。獲取后，其內(nèi)容不會(huì)隨 DOM 的變化而變化。

注意: querySelectorAll 返回的 NodeList 雖然是靜態(tài)的，但它比 getElementsBy... 返回的動(dòng)態(tài)集合更常被使用，因?yàn)樗С指鼜V泛的 CSS 選擇器，并且可以通過(guò) forEach, map, filter 等數(shù)組方法進(jìn)行遍歷（需要先轉(zhuǎn)換或使用 for...of 循環(huán)）。

方法選擇建議

• 查找單個(gè)唯一元素: 優(yōu)先使用 document.getElementById(id)，效率最高。
• 需要強(qiáng)大的選擇能力: 使用 document.querySelector(selectors) (單個(gè)) 或 document.querySelectorAll(selectors) (多個(gè))。它們的 CSS 選擇器語(yǔ)法極其靈活，幾乎能滿足所有查找需求。
• 按標(biāo)簽或類(lèi)名批量查找: document.getElementsByTagName(tagName) 和 document.getElementsByClassName(className) 也是很好的選擇，尤其當(dāng)你確實(shí)需要?jiǎng)討B(tài)集合時(shí)（雖然大部分場(chǎng)景下 querySelectorAll 已足夠）。

結(jié)語(yǔ)

掌握這些 DOM 查詢方法是進(jìn)行前端開(kāi)發(fā)的基礎(chǔ)。getElementById 用于精準(zhǔn)定位，querySelector/querySelectorAll 用于靈活查找，getElementsBy... 系列則提供了基于標(biāo)簽、類(lèi)名、屬性的傳統(tǒng)方式。根據(jù)實(shí)際需求選擇合適的方法，你就能輕松地在 DOM 樹(shù)中找到任何你想操作的元素。

以上就是JavaScript精準(zhǔn)捕獲DOM元素五種方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript捕獲DOM元素的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論