为何可通过name直接访问表单？MDN未提及对应属性的技术疑问

问题描述 #

最近我查阅MDN的HTMLFormElement相关文档时，看到官方给出的表单获取方式如下：

要获取HTMLFormElement对象，你可以结合CSS选择器使用querySelector()，也可以通过文档的forms属性获取页面中所有表单的列表。

Document.forms会返回一个包含页面所有HTMLFormElement对象的数组。你可以通过以下任意语法获取单个表单：

document.forms[index]：返回表单数组中指定索引位置的表单。

document.forms[id]：返回ID为id的表单。

document.forms[name]：返回name属性值为name的表单。

但我发现不用通过Document.forms，直接通过document对象加上表单的name属性值就能访问对应表单，比如：

let myForm = document.myFormName;

我翻遍了MDN的WebAPI页面，始终没找到文档明确说明这个属性的存在，它似乎并不属于Document或Element对象的标准属性。

另外，我还在MDN的一个示例里看到了类似写法：

document.registration.accept.checked = false;

特此请教：这种直接访问方式对应的API属性为何未在MDN相关文档中明确说明？

解答 #

这种直接通过document.[元素name/id]访问元素的方式，其实是历史遗留的DOM兼容特性，并非正式的标准API，所以MDN不会将其作为推荐用法详细说明。

具体细节：

• 早期浏览器为了简化开发者的操作，实现了一个非标准特性：当页面中的元素（表单、图片、链接等）设置了name或id属性时，会自动将该元素挂载到document对象上，以属性值作为对象的属性名。
• 这个特性在现代浏览器中大多仍能兼容，但它并不属于W3C的标准规范，还存在命名冲突风险（比如元素name与document原生属性重名时，会覆盖原生属性）。
• MDN的文档聚焦于标准API和推荐实践，因此不会专门收录这种非标准的历史特性，官方始终推荐使用document.forms、querySelector()、getElementById()这类标准方法来获取元素。

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