JavaScript >> Javascript 文檔 >  >> Tags >> DOM

如何使用 JavaScript 選擇 DOM 元素

文檔對像模型 (DOM) 是在加載文檔後由瀏覽器創建的 HTML 和 XML 文檔的編程接口。網頁本質上是由 DOM 表示為節點和對象的文檔。它允許程序操作文檔的內容、結構和样式。

在本教程中,我們將學習如何使用 JavaScript 訪問 DOM 中的不同節點(HTML 元素)。讓我們從第一種方法開始:通過 ID 獲取元素。

按 ID 獲取元素

documentgetElementById() 方法將元素 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 選擇器。我們還討論了迭代這些方法返回的通用元素集合的方法。


Tutorial JavaScript 教程
  1. Web API 探索

  2. 從谷歌地圖中刪除所有控件

  3. 如何開始使用 jQuery Mobile

  4. 有沒有辦法在 JS 中用 transform=“translate(mouseX,mouseY)” 翻譯嵌套元素?

  5. React JSX 基礎知識

  6. 使用 Watson Assistant 構建聊天機器人🤖,實現在線購物自動化

  7. 使用 React、Redux 和 Sanity.io 構建 Web 應用程序

  1. Appwrite 簡介:易於自託管的開源 Firebase 替代方案🚀

  2. 帶有 Express 的 Restful API

  3. 在 JavaScript 中使用集合時要避免的 5 個反模式

  4. 將 Vuex 模塊重寫為 Composition API。

  5. 如何在 JavaScript 中讀取 JSON 文件——在 JS 中讀取 JSON

  6. JavaScript 對象屬性標誌和描述符概述

  7. NSQ 教程:使用 NSQ 構建一個簡單的消息隊列

  1. 在您的 React 應用程序中集成 Razorpay 支付網關

  2. 如何使該表在最初加載時按此特定列排序?

  3. 你絕對可以使用全局變量來管理 React 中的全局狀態

  4. 學習編碼