form.getElementsByName 不是一个函数，但是 document.getElementsByName 是

Question

第一个示例（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]
}

但是，当我想从form而不是整个document的角度select同一个字段时，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 属性获取字段？ document 和 form 有不同的数据类型吗？

Answer 1

根据 MDN，getElementsByName 是 Document 对象的函数（因此它只存在于全局文档对象，而不是每个 HTML 元素）：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

作为解决方法，您可以使用查询选择器来查找元素，如下所示：

const name = form.querySelector("input[name='name']");

form.getElementsByName 不是一个函数，但是 document.getElementsByName 是

form.getElementsByName is not a function, but document.getElementsByName is

javascript

getelementsbyname