在 JavaScript 中按名稱獲取元素

Shraddha Paghdar 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中通過 getElementsByName() 獲取元素
  2. 在 JavaScript 中通過 querySelectorAll() 獲取元素
在 JavaScript 中按名稱獲取元素

有一些方法可以獲取像 getElementById()getElementByClass() 這樣的元素。但是,如果你想選擇/編輯具有特定名稱的所有專案怎麼辦?

JavaScript 提供了 querySelectorAll()getElementsByName() 方法來執行此任務。

本文將介紹如何在 JavaScript 中按名稱獲取元素。

在 JavaScript 中通過 getElementsByName() 獲取元素

getElementsByName 是一個內建的 document 方法,它返回其 name 屬性與指定名稱匹配的 Objects/NodeList 元素。此 NodeList 表示使用索引可訪問的節點陣列,並且此索引與任何其他陣列一樣以 0 開頭。

語法:

document.getElementsByName(name);

name 是一個必需引數,用於指定必須匹配的 HTML 屬性的 name。如果找到元素,則返回相應 DOM 元素的物件;否則,它返回 null

getElementsByNamequerySelectorAll 之間的區別在於 getElementsByName 首先只選擇那些指定名稱屬性與給定名稱匹配的元素。而 querySelectorAll 可以使用任何選擇器,提供更大的靈活性。

有關更多資訊,請閱讀 getElementById 方法的文件。

示例程式碼:

<div>
  <label>First Name</label>
  <input type="text" id="firstName" name="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" name="lastName" value="Doe">
</div>
const firstName = document.getElementsByName('firstName');
const lastName = document.getElementsByName('lastName');
console.log(firstName[0].value);
console.log(lastName[0].value);

上面的程式碼用 firstNamelastName 定義了兩個輸入元素。當我們使用 getElementsByName() 訪問文件時,它會查詢 name 屬性與名字匹配的所有節點並返回 NodeList。由於這是一個陣列,我們可以用 [0] 提取第一個匹配元素。如果找到多個匹配項,你可以通過陣列迭代並列印出所有值。輸出將如下所示:

輸出:

John
Doe

在 JavaScript 中通過 querySelectorAll() 獲取元素

querySelectorAll() 是一個內建的 document 方法,它返回 selectors 匹配指定選擇器的 Element / NodeList 物件。也可以傳輸多個選擇器。

querySelectorAll()querySelector() 的區別在於,首先返回匹配項的所有物件,然後返回單個匹配項的物件。如果傳遞了無效的選擇器,則會顯示 SyntaxError

語法:

document.querySelectorAll(selectors);

selectors 是一個必需引數,它指定必須匹配的 HTML 屬性的 selector。你可以通過分隔逗號傳遞多個選擇器。例如,document.querySelectorAll('input[name=firstName]') 查詢名稱為 firstName 的所有輸入元素。如果找到匹配的元素,則返回匹配的 DOM 元素物件;否則,它返回一個空的 NodeList。

有關更多資訊,請閱讀 querySelectorAll 方法的文件。

示例程式碼:

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>
const selectors = document.querySelectorAll('input[name=firstName]');
console.log(selectors.length, selectors[0].value);

上面的程式碼用 firstNamelastName 定義了兩個輸入元素。當我們使用 querySelectorAll() 訪問文件時,它會查詢名稱屬性與給定名稱匹配的所有節點並返回 NodeList。由於這是一個陣列,我們可以用 [0] 提取第一個匹配元素。如果找到多個隨機元素,你可以迭代矩陣並列印所有值。輸出將如下所示:

輸出:

1
John
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn

相關文章 - JavaScript Element