JS中未声明变量自动匹配DOM元素ID？求特性名称及兼容性

Hey there! That's a super interesting browser behavior you've uncovered—this feature is officially called Named Access on the Window Object.

What's happening under the hood? #

When you reference an undeclared variable in the global scope, JavaScript looks to the window object (the global context in browsers) for a matching property. Browsers automatically add DOM elements with an id attribute as properties to the window object, using the element's id as the property name. That's why your code:

<div id="block"></div> 
<script>console.log(block)</script>

works even though block was never declared—your browser has already bound the <div> element to window.block, so referencing block globally resolves to that element.

A few important notes: #

• This is an HTML specification feature, not part of core JavaScript itself.
• While widely supported, it's generally not recommended for production code:
  • Declaring a global variable with the same name will override the auto-bound element property, leading to unexpected behavior.
  • Edge cases (like multiple elements sharing the same id, or elements with a name attribute matching an id) can have inconsistent behavior across browsers.
• For reliable, readable code, stick to explicit methods like document.getElementById('block') or document.querySelector('#block') to fetch DOM elements.

Compatibility #

This behavior is supported across all modern browsers, and even works in legacy browsers like Internet Explorer—since it's been part of HTML specs for a long time.

内容的提问来源于stack exchange，提问作者khandaniel