迹忆客 专注技术分享

JavaScript 提供了多种获取元素的方法，例如 getElementById() 和 getElementByClass()。但是如果你想选择/处理所有特定类型的元素怎么办？JavaScript 提供了 querySelectorAll() 方法或 getElementsByTagName() 方法来执行这样的任务。

在本文中，我们将学习如何在 JavaScript 中按类型获取元素。

在 JavaScript 中通过 querySelectorAll() 获取元素

这是一个内置的 document 方法，由 JavaScript 提供并返回其 selectors 匹配指定选择器的元素对象/NodeList。也可以传递多个选择器。querySelectorAll() 和 querySelector() 之间有一个区别。对于第一个，返回匹配元素的所有对象，然后对于第二个，它是单个匹配元素对象。如果传递了无效的选择器，则会发出 SyntaxError。

语法

document.querySelectorAll($selectors);

参数

• $selectors：这是一个强制参数，指定必须匹配的 HTML 属性的 selector。可以通过逗号分隔传递多个选择器。例如，document.querySelectorAll("p") 查找所有 p 标签元素。

返回值

如果找到对应的元素，则返回对应的 DOM 元素对象；否则，它返回空的 NodeList。

示例代码：

<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[type=text]');
console.log(selectors.length, selectors[0].value, selectors[1].value);

输出：

2
John
Doe

在 JavaScript 中通过 getElementsByTagName() 获取元素

这是 JavaScript 提供的内置 document 方法，并返回其 tag 与指定标签名称匹配的元素 objects/NodeList。根节点也包含在搜索中，并返回实时 HTML 集合。

语法

document.getElementsByTagName($name);

参数

• $name：这是一个强制参数，指定必须匹配的 HTML 属性的 tagName。

返回值

如果找到对应的元素，则返回对应的 DOM 元素对象；否则，它返回 null。

getElementsByTagName 和 querySelectorAll 之间的唯一区别是第一个只选择指定标签名称与给定标签名称匹配的元素。相比之下，querySelectorAll 可以使用任何选择器，这为其提供了更大的灵活性和功能。

此外，getElementsByTagName 返回活动节点列表，而 querySelectorAll 返回静态节点列表。活动节点列表有助于在 DOM 更改时立即更新结果，并且不需要你触发查询。

示例代码：

<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 inputs = document.getElementsByTagName('input');

for(let i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'text') {
        console.log(inputs[i].value);
    }
}

输出：

John
Doe