迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

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

作者:迹忆客 最近更新:2022/11/22 浏览次数:

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

  1. 使用表单上的 elements 属性来获取表单元素的集合。
  2. 使用 Array.from() 方法将集合转换为数组。
  3. 使用 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;
  }
}

如果我们不需要遍历所有表单元素,这将是一个更有效的解决方案,但可以在工作完成后中断。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便