使用 JavaScript 获取表单中的所有元素

作者

使用 JavaScript 获取表单中的所有元素

Get all Elements in a Form using JavaScript

要获取表单中的所有元素：

  1. 选择表单元素。
  2. 使用该elements属性获取表单元素的集合。
  3. 或者，使用 方法将集合转换为数组Array.from()
    。

以下是本文示例的 HTML。

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

  <body>
    <form id="my-form">
      <input type="text" id="first_name" name="first_name" />
      <input type="text" id="last_name" name="last_name" />

      <textarea id="message" name="message" rows="5" cols="30"></textarea>

      <input type="submit" value="Submit" />
    </form>

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

这是相关的 JavaScript 代码。

索引.js
const form = document.getElementById('my-form');

// ✅ Get all form elements
const formElements = Array.from(form.elements);

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

console.log('-----------------');

// ✅ Get only input elements in form
const onlyInputs = document.querySelectorAll('#my-form input');

onlyInputs.forEach(input => {
  console.log(input);
});

我们

使用方法选择了表单元素document.getElementById()。

表单上的
elements
属性返回一个包含所有表单控件的集合。

该集合包括input元素、textarea、元素等。 select

如果您需要对集合使用任何特定于数组的方法，请使用
Array.from
方法将其转换为数组。

我们传递给
forEach
方法的函数会针对数组中的每个元素进行调用。

在第二个示例中，我们使用
querySelectorAll
方法来仅选择input表单中的元素。

索引.js
const onlyInputs = document.querySelectorAll('#my-form input');

onlyInputs.forEach(input => {
  console.log(input);
});
该方法将包含有效 CSS 选择器的字符串作为参数，并返回NodeList包含匹配元素的 。

您传递给querySelectorAll方法的选择器可以根据需要指定。

以下示例仅选择表单内部带有of的input元素。typetext

索引.js
const onlyInputs = document.querySelectorAll(
  '#my-form input[type="text"]'
);

onlyInputs.forEach(input => {
  console.log(input);
});

上面示例中的NodeList不包含input类型为 的元素submit。

–