使用 JavaScript 循环遍历所有表单元素

JavaScript 2年前 48

要遍历表单中的所有元素：

使用表单上的 elements 属性来获取表单元素的集合。
使用 Array.from() 方法将集合转换为数组。
使用 forEach() 方法迭代元素。

这是本文中示例的 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" />
      <input type="text" id="country" name="country" />
    </form>

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

这是相关的 JavaScript 代码。

const form = document.getElementById('my-form')

// 👇️ if you can't add an `id` to the form
// const form = document.querySelector('form');

Array.from(form.elements).forEach(element => {
  console.log(element);
});

我们使用 getElementById() 方法来选择表单元素。

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

我们使用 Array.from() 方法将集合转换为数组，因此我们可以在其上调用 forEach 方法。

我们传递给 forEach 方法的函数被数组中的每个元素调用。

我们还可以使用 for...of 循环来遍历表单中的元素。

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

for (const element of form.elements) {
  console.log(element);
}

for...of 循环允许我们使用 break 关键字在满足特定条件时跳出循环。

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

for (const element of form.elements) {
  console.log(element);
  if (element.value === 'hello') {
    break;
  }
}