与元素 id 相同的字符串返回元素

Question

我遇到了一种有效的情况，但我不明白为什么。如果我命名一个元素id="abc"并且不console.log(abc)先设置它，它就会给我 HTML 对象。任何人都可以解释这种行为吗？

例子

<h1 Id="abc" >abcdefghj</h1> 

<script>
  // without using document.getElementById
  console.log(abc); // Returns h1 element  
 </script>

我不知道为什么它在不使用 document.getElementById() 的情况下给了我整个元素。

Answer 1

这是 DOM API 的一个遗留特性：基本上，任何带有 ID 的东西都可以通过它在 window 对象中的键来访问，即window[id].

在您的情况下，abc本质上是window.abc，它是对 ID 为abc（即匹配#abc选择器）的元素的引用。

这也是为什么 HTML 文档中的 ID 必须唯一的原因，并且处理重复 ID 的浏览器行为在技术上未由规范定义。

在相关说明中，由于此功能，为您的元素提供可能覆盖本机功能/原型的 ID 是很危险的。这是一个示例：<button id="submit">位于表单中时。当您尝试使用 以编程方式提交表单时formElement.submit()，您实际上遇到了错误，因为现在formElement.submit实际上引用了 ID 为 的嵌套按钮元素，submit而不是本机方法。你可以在这里自己尝试：

const myForm = document.getElementById('myForm');

const helloButton = document.getElementById('btn');
helloButton.addEventListener('click', () => {
  myForm.submit();
})

<form id="myForm">
  <input type="text" />
  <button id="submit">
    Submit form
  </button>
  <button id="btn" type="button">
    Click me to programmatically submit form
  </button>
</form>