为什么form调用getElementsByName报错，document和form数据类型不同吗？

第一个示例（type="button"为有意设置）可正常运行：

<form class="needs-submission">
    <input type="hidden" name="id" value="1">
    <input type="text" name="name">
    <input type="button" name="save" value="Save Changes" onclick="saveChanges(this.closest('.needs-submission'))">
</form>

function saveChanges(form) {
    const id = document.getElementsByName('id')[0]
    const name = document.getElementsByName('name')[0]
    const save = document.getElementsByName('save')[0]
}

但当我不从整个document范围选择，而是从传入的form对象范围内查询相同字段时，form.getElementsByName会被提示不是合法函数。

function saveChanges(form) {
    const id = form.getElementsByName('id')[0]
    const name = form.getElementsByName('name')[0]
    const save = form.getElementsByName('save')[0]
}

报错信息：

Uncaught TypeError: form.getElementsByName is not a function
    at saveChanges
    at HTMLInputElement.onclick

但form.getElementsByTagName看起来可以正常运行：

function saveChanges(form) {
    const id = form.getElementsByTagName('input')[0]
    const name = form.getElementsByTagName('input')[1]
    const save = form.getElementsByTagName('input')[2]
}

我的问题是：为什么无法通过name属性从form对象中查询到对应字段？document和form属于不同的数据类型吗？

document和<form>对应的HTMLFormElement确实属于不同的接口类型，支持的API范围不一样，出现报错是因为getElementsByName是仅属于Document接口的方法，普通DOM元素（包括form元素）都没有实现这个方法。

核心原因说明 #

• getElementsByTagName、querySelector、querySelectorAll这类方法是定义在通用Element接口上的，所有DOM元素（包括form、div、span等）都继承了这些方法，所以可以在任意元素上调用，查询当前元素后代范围内的节点。
• getElementsByName设计初衷就是全局查询文档内带有指定name属性的元素，所以W3C标准只给document对象实现了这个方法，单个元素没有必要支持，也没有纳入标准。

替代方案 #

方案1：使用form自带的elements集合（最推荐） #

表单元素原生提供了elements属性，专门用来快速访问表单内的所有控件，直接通过name属性值就能获取对应元素，性能比DOM查询更高：

function saveChanges(form) {
    const id = form.elements['id']
    const name = form.elements['name']
    const save = form.elements['save']
}

方案2：使用querySelector查询 #

所有元素都支持querySelector方法，用属性选择器就能按name查询当前表单范围内的元素：

function saveChanges(form) {
    const id = form.querySelector('[name="id"]')
    const name = form.querySelector('[name="name"]')
    const save = form.querySelector('[name="save"]')
}

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