javascript - 为什么 form.id 返回子输入而不是 id？

Question

在w3school 规范中，它说它应该返回一个表示元素 id 的字符串。在 Microsoft Edge 42.17134.1.0 和 Firefox 62.0.2 上复制了此问题。

element = document.getElementById('form');

document.getElementById('result').innerHTML = element.id
document.getElementById('getAttributeResult').innerHTML = element.getAttribute('id')

<form id="form">
  <input type="hidden" name="id" />
</form>
Result of using .id:
<div id="result">
</div>
<br>
Result of using getAttribute:
<div id="getAttributeResult">
</div>

标签： javascript

Answer 1

表单元素有一种特殊行为，可以扩展输入名称的属性。来自MDN

命名输入作为属性添加到它们的所有者表单实例中，并且如果它们共享相同的名称，则可以覆盖本机属性（例如，具有输入命名动作的表单将使其动作属性返回该输入而不是表单的动作 HTML 属性）。

如果您更改输入，它将按预期工作。例如：

element = document.getElementById('form');

document.getElementById('result').innerHTML = element.id
document.getElementById('getAttributeResult').innerHTML = element.getAttribute('id')

<form id="form">
  <input type="hidden" name="_id" />
</form>
Result of using .id:
<div id="result">
</div>
<br>
Result of using getAttribute:
<div id="getAttributeResult">
</div>