<div id="foo"></div>Thus, the div element above can be accessed either via window.foo or, like all properties of window, via the global variable foo. For example, in the Chrome console, you can do the following:
> "foo" in window true > foo <div id="foo"></div>
> "foo" in window false > typeof foo // does the variable exist? object Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead. > foo [object HTMLDivElement] Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead. > "foo" in window trueWhat does that mean? Initially, there is no property window.foo. But the first time it is accessed (either directly or via the global variable foo), it is created automatically.
[Note: the code above can only be executed via a script tag, but not via the console. That is because the console handles global variables differently, so that the auto-creation process doesn’t work properly.]
Whenever you read foo, the div element is returned and a warning tells you not to do that. Obviously, the warning is correct: It’s fine to use this feature interactively, but you should not rely on it in actual code.
Update 2: Commenter tjvantoll mentions where HTML5 standardizes that element IDs become properties of window. In reaction to that, the post now describes what is specified there.