在 JavaScript 中按名稱獲取元素
有一些方法可以獲取像 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
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