form.getElementsByName 不是 function，但 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。

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

According to MDN, getElementsByName is a function of the Document object (so it only exists for the global document object, not for every HTML element): https://developer.mozilla.org/en-US/docs/Web/API/文檔/getElementsByName

作為一種解決方法，您可以使用查詢選擇器來查找元素，如下所示：

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