在 JavaScript 中按名稱獲取元素

1. 在 JavaScript 中通過 getElementsByName() 獲取元素
2. 在 JavaScript 中通過 querySelectorAll() 獲取元素

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

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

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

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

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

語法：

document.getElementsByName(name);

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

getElementsByName 和 querySelectorAll 之間的區別在於 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);

上面的程式碼用 firstName 和 lastName 定義了兩個輸入元素。當我們使用 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);

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

輸出：

1
John