js获取form所有input

在JavaScript中，获取HTML表单（form）内的所有input元素是一个常见的需求，尤其是在处理表单提交或进行客户端验证时。以下是实现这一功能的基础概念和相关代码示例。

基础概念

DOM（文档对象模型）：DOM是HTML和XML文档的编程接口。它提供了对文档的结构化的表示，并定义了访问和操作文档的方式。
querySelectorAll()：这是DOM中的一个方法，用于选择文档中匹配指定CSS选择器的所有元素，并返回一个NodeList集合。

类型与应用场景

类型：此方法适用于所有需要通过JavaScript动态获取页面元素的场景。
应用场景：
- 表单验证：在提交表单前检查所有输入字段是否有效。
- 数据收集：在用户提交表单后，收集所有输入数据进行处理。
- 动态交互：根据用户输入实时更新页面内容或样式。

示例代码

以下是一个简单的示例，展示如何使用JavaScript获取form内的所有input元素，并打印它们的值：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Input Example</title>
</head>
<body>

<form id="myForm">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  
  var inputs = this.querySelectorAll('input'); // 获取所有input元素
  inputs.forEach(function(input) {
    console.log(input.name + ': ' + input.value); // 打印每个input的名称和值
  });
});
</script>

</body>
</html>