The JS DOM element ID is the global variable _dom

Standard specification

The HTML5 specification document states that if an element conforms to any of the following two rules, the window object must have an attribute corresponding to it, and the property value is the object.

• If an element has an id attribute, then the property value of the id attribute becomes the property name of the Window object.
• If an element has the name attribute, the property value of the Name property becomes the property name of the Window object. But the tag name for this element must be: A, applet, area, embed, form, frame, frameset, iframe, IMG, Object, one of them.

Let's look at an example. Suppose there is a page that contains a DIV element with an id attribute of "foo":

Copy Code code as follows:

<div id= "foo" ></div>

As a result, the div element above can be called by Window.foo (as with the other Window properties), or global variable Foo. For example, in the Chrome console, you can do this:

Copy Code code as follows:

> "foo" in Window
True
> foo
<div id= "foo" ></div>

Firefox

Firefox (14) works in a slightly different way.

Copy Code code as follows:

> "foo" in Window
False
> typeof foo//Is there any wood in the global variable?
Object
The error console prints the following warning.//element referenced by Id/name in the global scope.
Use the standard document.getElementById () instead.

> foo
[Object Htmldivelement]
The error console prints the following warning.//element referenced by Id/name in the global scope.
Use the standard document.getElementById () instead.> "foo" in Window True

Copy Code code as follows:

> "foo" in Window
False
> typeof foo//Is there any wood in the global variable?
Object
The error console prints the following warning.//element referenced by Id/name in the global scope.
Use the standard document.getElementById () instead.

> foo
[Object Htmldivelement]
The error console prints the following warning.//element referenced by Id/name in the global scope.
Use the standard document.getElementById () instead.> "foo" in Window True

What the hell is this all about? When initialized, window does not have property foo. But when you first access this property (either directly via the Window.foo property or through the global variable foo), it is automatically created.

Translator Note: I did not find a warning in the firefox14,15,18, but in the Firefox12 test, there was a warning.

[Note: The code in the example can only be run through the script tag in the Web page and not run through the terminal. This is because the terminal uses a different approach when it handles global objects.]

Translator Note: I try the code in the example in Firebug, and I don't see any difference.

Once you try to read the value of Foo , although the DIV element is returned normally, the error console warns you that it should not be done. Obviously, such a warning is correct: You can use this feature when debugging a terminal, but in the actual code, it should not be used.

Cody Lindley wrote a jsperf test to compare the performance differences between accessing foo through global variables and accessing foo through Window.foo . Interestingly, Only access to Window.foo in Firefox is faster .