当前位置：主页 > 学无止境 > WEB前端 > JavaScript >
使用 JavaScript 循环遍历所有表单元素
作者：迹忆客
最近更新：2022/11/22
浏览次数：
要遍历表单中的所有元素：
-
使用表单上的
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;
}
}
如果我们不需要遍历所有表单元素，这将是一个更有效的解决方案，但可以在工作完成后中断。
