在 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