使用 JavaScript 按类型获取所有元素

作者

使用 JavaScript 按类型获取所有元素

Get all Elements by Type using JavaScript

使用该querySelectorAll()方法按类型获取所有元素，例如
document.querySelectorAll('input[type="text"]'). 该方法返回一个
NodeList包含与提供的选择器匹配的元素的 。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input type="text" id="first_name" />
    <input type="number" id="age" />

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
// ✅ Get all input elements with type = "text"
const elements1 = document.querySelectorAll('input[type="text"]');
console.log(elements1); // 👉️ [input#first_name]

// ✅ Get all input elements
const elements2 = document.querySelectorAll('input');
console.log(elements2); // 👉️ [input#first_name, input#age]

// ✅ Get all input elements
const elements3 = document.getElementsByTagName('input');
console.log(elements3); // 👉️ [input#first_name, input#age]

在第一个示例中，我们使用
document.querySelectorAll
方法来获取属性值为 的
所有input元素。typetext

您可以根据需要调整选择器，例如，下面的示例选择type属性设置为值的任何类型的元素text（不仅仅是
input元素）。

索引.js
const elements1 = document.querySelectorAll('[type="text"]');

在第二个示例中，我们使用querySelectorAll方法获取NodeList
所有input标签中的一个。

索引.js
const elements2 = document.querySelectorAll('input');

如果需要遍历集合，可以使用forEach()方法。

索引.js
const elements2 = document.querySelectorAll('input');
console.log(elements2); // 👉️ [input#first_name, input#age]

elements2.forEach(element => {
  console.log(element);
});

第三个示例使用
document.getElementsByTagName
方法来选择所有input标签。

索引.js
const elements3 = document.getElementsByTagName('input');
这用作该方法的替代querySelectorAll方法，您可能会看到getElementsByTagName旧代码库中使用的方法。

该方法返回一个HTMLCollection，如果您需要使用 之类的方法，则必须将其转换为数组forEach()。

索引.js
const elements3 = Array.from(document.getElementsByTagName('input'));
console.log(elements3); // 👉️ [input#first_name, input#age]

elements3.forEach(element => {
  console.log(element);
});

通过将 转换HTMLCollection为数组，我们可以使用任何支持数组的方法。

–

发表评论