document.forms 是只读的实时 HTMLCollection,提供按索引、name 快速访问表单,支持 .elements 获取控件,兼容 IE6+,动态插入自动更新,遍历时建议转数组避免错误。

document.forms 是一个只读的 HTMLCollection,它直接暴露页面中所有 元素,无需使用 querySelectorAll('form') 或遍历 DOM,是访问表单最轻量、最高效的方式之一。
快速获取所有表单(集合)
直接访问 document.forms 即可拿到所有表单节点的类数组集合:
- 支持按索引访问:例如
document.forms[0]获取第一个表单 - 支持按 name 属性访问(若表单有
name="login"):document.forms.login - 支持按 id 访问(部分浏览器兼容,但不推荐依赖——优先用
document.getElementById)
安全遍历所有表单
因为 document.forms 是实时 HTMLCollection,建议转为数组再操作,避免动态修改时出错:
- 用扩展运算符:
[...document.forms].forEach(form => console.log(form.name)) - 用 Array.from:
Array.from(document.forms).map(f => f.elements) - 注意:不要在 for 循环中直接用
document.forms.length配合i++修改表单(如移除),可能跳过节点
结合表单内元素快速操作
每个表单对象自带 .elements 属性,可直接获取其全部控件(input、select、textarea、button 等):
-
document.forms[0].elements返回该表单下所有可提交元素的 HTMLCollection -
document.forms.login.elements.email可直接取到name="email"的输入框(支持 name 或 id) - 对
.elements同样建议转数组处理,尤其需要 filter/map 时
注意事项与兼容性
这个 API 兼容性极好(IE6+ 支持),但需留意几个细节:
- 只有具有
标签的元素才会被收录,display: none或hidden不影响收录 - 动态插入的表单会自动加入
document.forms(实时性) - 如果多个表单用了相同的
name,document.forms[name]返回的是 NodeList(不是单个元素),需进一步索引 - 表单没有
name或id时,只能靠索引或 querySelector 定位
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











