直接用 element.children 无法过滤表单控件，需配合 array.from() 和 filter() 筛选 input、textarea、select、button 等标签；它仅返回直系子元素，深层嵌套需用 queryselectorall；还可增强条件排除 disabled 元素。
直接用 element.children 无法“过滤”，它只返回所有子元素节点（不含文本、注释等），但不区分是否为表单控件。要筛选出表单内的输入类元素（如 <input>、<textarea></textarea>、<select></select>、<button></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>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java"><img
src="https://img.php.cn/upload/skill/000/000/081/178955835420587.jpg" alt="Alibabacloud Sdk Client Initialization For Java" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="overflowclass">Alibabacloud Sdk Client Initialization For Java</a>
<p class="overflowclass">在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>、<label></label>、<fieldset></fieldset> 等非控件元素。
注意：children 不包含深层嵌套，只查直系子元素
element.children 只返回第一层子元素，不会递归查找。如果表单结构是：
上面的 input 和 select 不会出现在 form.children 中，因为它们是 <div> 的子元素。此时应改用 <code>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 判断更准确。
