与元素ID相同的字符串返回元素[duplicate]

问题描述 投票:28回答:1
我遇到了一个可行的情况,但我不明白为什么。如果我命名一个元素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()就能给我整个元素。
javascript html
1个回答
32
投票
这是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>
© www.soinside.com 2019 - 2024. All rights reserved.