The js DOM element ID is a global variable.

Standard Specification

The HTML5 standard document states that if an element meets any of the following two rulesThe window object must have an attribute corresponding to it. The attribute value is the object.

• If an element has the ID attribute, the attribute value of the ID attribute becomes the attribute name of the window object.
• If an element has the name attribute, the attribute value of the name attribute becomes the attribute name of the window object. but the label name of 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 an ID attribute"Foo"Div element:

Copy codeThe Code is as follows:
<Div id = "foo"> </div>

In this way, the above div element can be passed through window. foo (the same as other window attributes), or the global variable foo is used to access and ask. for example, in the Chrome console, you can do this:

Copy codeThe Code is as follows:
> "Foo" in window
True
> Foo
<Div id = "foo"> </div>


Firefox

Firefox (14) works in a slightly different way.
Copy codeThe Code is as follows:
> "Foo" in window
False
> Typeof foo // is there a global variable?
Object
// The error console outputs the following warning. // Element referenced by ID/NAME in the global scope.
// Use W3C standard document. getElementById () instead.

> Foo
[Object HTMLDivElement]
// The error console outputs the following warning. // Element referenced by ID/NAME in the global scope.
// Use W3C standard document. getElementById () instead.> "foo" in window true


Copy codeThe Code is as follows:
> "Foo" in window
False
> Typeof foo // is there a global variable?
Object
// The error console outputs the following warning. // Element referenced by ID/NAME in the global scope.
// Use W3C standard document. getElementById () instead.

> Foo
[Object HTMLDivElement]
// The error console outputs the following warning. // Element referenced by ID/NAME in the global scope.
// Use W3C standard document. getElementById () instead.> "foo" in window true

What exactly is this? During initialization, the window does not have the property foo. however, when accessing this attribute for the first time (via window. the foo attribute can be accessed directly or through the global variable foo.) It is automatically created.

Note: I did not find any warning in Firefox14, 15, and 18, but I did have a warning in the Firefox12 test.

[Note: The code in this example can only be passed throughScript tag running can take effectAnd cannot be run through the terminal. This is because the terminal uses different methods to process global objects.]

Note: I tried the code in the example in Firebug and did not find any difference.

Once you try to readFoo Value, Although the div element will be returned normally, the error console will warn you that this should not be done. obviously, this warning is correct: You can use this feature during terminal debugging, but it should not be used in actual code.

Cody Lindley wrote a jsPerf test to compareAccess through global variablesFooAnd passWindow. foo to accessFooPerformance difference. Interestingly, only access in FirefoxWindow. foo faster.