JavaScript 中怎么查询页面中所有的表单控件节点-js教程-PHP中文网

可通过 document.queryselectorall() 或 document.forms 遍历获取表单控件；前者直接匹配 input（排除 hidden）、select、textarea、button，后者通过 form.elements 语义化提取；均需按需过滤 disabled、无 name 或无提交意义的元素。

javascript 中怎么查询页面中所有的表单控件节点

可以通过 document.querySelectorAll() 或 document.forms 配合遍历子元素来获取页面中所有表单控件节点（如 input、select、textarea、button 等）。

使用 querySelectorAll 获取全部可交互表单控件

这是最直接的方式，匹配常见表单控件标签及带 name 属性的可提交元素：

input（排除 type="hidden" 可选，按需过滤）
select、textarea、button
也可加上 [name]:not([type="hidden"]) 确保只选有提交意义的控件

示例代码：

const controls = document.querySelectorAll(
  'input:not([type="hidden"]), select, textarea, button'
);

返回的是 NodeList，可直接遍历或转为数组操作。

通过 forms 集合逐个提取控件

如果只关心属于 <form></form> 内部的控件（不含独立在表单外的 input），可用 document.forms：

jm-jsjkxyjs02-pzl-803

查询全球任意城市的实时天气和未来天气预报

下载

document.forms 返回所有 <form></form> 元素的集合
每个 form.elements 属性天然包含该表单内所有控件（含 input、select、textarea、button、fieldset 等）
它比 querySelectorAll 更语义化，且自动排除非表单子元素

示例代码：

const allControls = [];
for (const form of document.forms) {
  for (const el of form.elements) {
    // elements 包含所有控件，但可能含 fieldset 等非交互元素
    if (['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(el.tagName)) {
      allControls.push(el);
    }
  }
}

补充：过滤掉不可用或无意义的控件

实际业务中常需排除以下节点：

disabled 或 readonly 的控件（视需求而定）
type="hidden"、type="submit"、type="reset"、type="button"（若只关心用户输入字段）
没有 name 属性的控件（通常不会被表单提交）

增强版选择器示例：

const userInputs = document.querySelectorAll(
  'input[name]:not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]), ' +
  'select[name], textarea[name]'
);