HTMLCollection命名属性访问表单元素的用法是否应当规避？

结论先行 #

这类通过name作为属性访问document.forms内元素的写法不属于需要弃用的风险特性，所有主流浏览器均稳定支持，仅在特定场景下建议用标准选择器写法替代。

规范依据说明 #

你在通用HTMLCollection接口文档中找不到相关定义是正常的，该特性的规则并没有定义在DOM标准的通用HTMLCollection规范中，而是在HTML标准针对几个特定历史保留集合的专有扩展里：

• document.forms返回的集合支持两类取值方式：
  1. 数字下标：按表单在文档中的出现顺序取值
  2. 字符串键：优先匹配表单的id属性，其次匹配name属性，document.forms.form01完全符合该匹配规则
• 表单内部的元素访问form01.title也符合规范：HTMLFormElement的elements集合同样支持用元素的name/id属性作为属性名访问

通用HTMLCollection文档中将命名属性访问标注为“历史遗留产物”，是因为该特性不再推广到所有新的HTMLCollection实现，仅针对document.forms、document.images、表单elements集合等历史常用的场景做兼容保留，并不代表这些场景的用法需要废弃。

用法选择建议 #

• 可以放心使用的场景：快速开发Demo、传统页面兼容性开发、个人项目等场景下可以直接用，该特性从IE6到最新版Chrome、Firefox、Safari均完全兼容，写法简洁高效。
• 更推荐使用标准选择器的场景：大型团队协作项目、对代码可维护性和静态检查要求高的场景，建议使用document.querySelector()或document.getElementById()写法，原因如下：
  • 命名属性可能和HTMLCollection原生方法冲突：如果表单name取为item、length这类和集合原生属性重名的值，document.forms.item会访问到原生方法而非目标表单
  • 静态检查工具（如TypeScript、ESLint）对动态命名属性的支持度差，容易遗漏类型错误
  • 选择器写法可读性更强，后续维护者可以直接看懂查询逻辑

示例说明 #

你给出的用法属于完全合法的兼容写法，可正常运行：

let title = document.forms.form01.title;
console.log(title.value);

<form name="form01">
  <input type="text" name="title" value="Hello World">
</form>

内容的提问来源于stack exchange，提问作者chrwahl