与元素id相同的字符串返回元素[重复]答案

【问题标题】：String identitical to id of an element returns the element [duplicate]与元素id相同的字符串返回元素[重复]
【发布时间】：2020-05-25 13:09:15
【问题描述】：

我遇到了一个可行的情况，但我不明白为什么。如果我将一个元素命名为 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()。

【问题讨论】：

id 属性在全局范围内定义。这就是为什么过度使用 id 不被视为最佳做法的原因
我认为以下问题可能有用Do DOM tree elements with ids become global variables?
abc 不是字符串。 "abc" 是。 abc 是一个标识符，会先在本地范围内查找，然后在全局范围内查找，最后在窗口对象中查找。

标签： javascript html

【解决方案1】：

这是 DOM API 的一个遗留功能：基本上，任何具有 ID 的东西都可以通过它在窗口对象中的键来访问，即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>

【讨论】：

很好，我不知道这个遗留功能，我们每天都在学习！
注意：IIRC 这曾经是不可靠的，但在 HTML5 中它现在是标准的。
您可能希望在答案中包含另一个花絮：abc 不是 OP 所声称的字符串（即"abc"），但它是一个标识符，并且作为这样它被视为一个名称和名称查找发生。
@user253751 出于遗留兼容性的原因进行标准化并不能阻止它被弃用。