迹忆客 专注技术分享

有一些方法可以获取像 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