直接用 element.children 无法过滤表单控件，需配合 Array.from() 和 filter() 筛选 input、textarea、select、button 等标签；它仅返回直系子元素，深层嵌套需用 querySelectorAll；还可增强条件排除 disabled 元素。
直接用 element.children 无法“过滤”，它只返回所有子元素节点（不含文本、注释等），但不区分是否为表单控件。要筛选出表单内的输入类元素（如 <input>、<textarea>、<select>、<button> 等），需配合 Array.from() 和 filter() 手动判断。
识别常见的表单控件元素
HTML 表单中可交互的控件有明确的标签名，包括：
-
input（所有类型：text、email、checkbox、radio、hidden 等） textareaselect-
button（含type="submit"、"reset"、"button"） -
output（虽不可编辑，但属表单关联元素，按需保留）
用 children + filter 获取纯输入元素
假设 formEl 是你的表单元素：
const formEl = document.querySelector('form');
const inputElements = Array.from(formEl.children).filter(el => {
const tag = el.tagName.toLowerCase();
return ['input', 'textarea', 'select', 'button'].includes(tag);
});
这样得到的就是仅含上述标签的子元素数组，自动排除了 <div>、<p>、<label>、<fieldset> 等非控件元素。
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
注意：children 不包含深层嵌套，只查直系子元素
element.children 只返回第一层子元素，不会递归查找。如果表单结构是：
<form>
<div class="controls">
<input name="user">
<select name="role"></select>
</div>
</form>
上面的 input 和 select 不会出现在 form.children 中，因为它们是 <div> 的子元素。此时应改用 form.querySelectorAll('input, textarea, select, button') 获取所有后代中的表单控件。
更健壮的写法：兼顾 type 属性和 disabled 状态（可选）
若还需排除被禁用的控件，可增强条件：
const interactiveControls = Array.from(formEl.children).filter(el => {
const tag = el.tagName.toLowerCase();
const isFormCtrl = ['input', 'textarea', 'select', 'button'].includes(tag);
const isEnabled = !el.hasAttribute('disabled') || el.getAttribute('disabled') !== 'disabled';
return isFormCtrl && isEnabled;
});
注意：disabled 是布尔属性，存在即为禁用，所以用 hasAttribute 判断更准确。
