26

Possible Duplicate:
IE/Chrome: are DOM tree elements global variables here?
why window[id] === document.getElementById( id )

I've just come across something in html/javascript which has surprised me a bit. When obtaining a reference to an html element, using javascript, I have always previously used either jQuery or document.getElementById. It also appears that you can directly access a element simply by using it's id. Can someone explain the nuances of this? I've googled but cannot find any reference to this ability, every site talks about getElementById.

The following page snippet illustrates this.

<html>
<head>
</head> 
<body>
    <input type="button" value="getElement" onclick="document.getElementById('blah').innerText = 'getElementById'" />
    <input type="button" value="direct" onclick="blah.innerText = 'direct';" />
    <div id="blah"></div>
</body>

Many thanks in advance.

zhulien
  • 5,145
  • 3
  • 22
  • 36
Sam Shiles
  • 10,529
  • 9
  • 60
  • 72
  • +1 Haven't come across this before but definitely works: http://jsfiddle.net/qdrAr/ – Clive Oct 19 '11 at 19:11
  • What browsers have you verified this in? Could not be commonly used because it may not work in all browsers. – Josh Mein Oct 19 '11 at 19:14
  • This is not cross browser. Some browsers may have started to support it, but not all, not the older versions anyway. – Nikoloff Oct 19 '11 at 19:15
  • 6
    The question is already answered in this thread: http://stackoverflow.com/questions/3434278/ie-chrome-are-dom-tree-elements-global-variables-here – Guard Oct 19 '11 at 19:21
  • 1
    God it's worth having a duplicate just to get your easy to understand question title! I would have never found this under "global tree". Good grief. – toddmo Sep 14 '16 at 16:13

3 Answers3

17

Being able to select elements on the page based on their [id] is a "feature" from early JavaScript (DOM lvl 0 or 1 methinks, can't seem to find the source).

Unfortunately it's a temperamental feature. What would happen if you had:

<div id="window"></div>

or

<div id="document"></div>

Better yet, what happens here?

<div id="foo"></div>
<div id="bar"></div>
<script>var foo = document.getElementById('bar');</script>

So the nuances to calling an element based on it's [id] is simply this:

Don't use it.

It's not consistent, and not guaranteed to receive future support.

Personally I'd like to see this "feature" go the way of document.all. It only causes more issues than it solves, and document.getElementById, while certainly verbose, is meaningful and understandable.

Community
  • 1
  • 1
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • I certainly agree with ***"Don't use it"***, but unfortunately it has wormed its way into the [HTML5 working draft](http://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object). There is an [ongoing discussion](http://www.w3.org/Bugs/Public/show_bug.cgi?id=11960) about it where, predictably, Microsoft are pushing for standardization and Mozilla are pushing to limit the "feature" to quirks-only. From what I can see, Microsoft are claiming that changing the behaviour of IE would break a number of sites. – Andy E Oct 19 '11 at 23:28
  • 1
    @AndyE, changing *anything* will break a number of sites. It's because the range of sites from working to broken is continuous, not discrete. There are *many* sites that are already broken. – zzzzBov Oct 19 '11 at 23:57
2

Using getElementById is more flexible and readable. For instance, this won't work:

<input type="button" value="direct" onclick="document.innerText = 'direct';" />
<div id="document"></div>

for obvious reasons, but this will:

<input type="button" value="getElement" onclick="document.getElementById('document').innerText = 'getElementById'" />
<div id="document"></div>

and it's more clear to other developers what's really going on.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
1

I don't believe it's a documented feature, and it doesn't appear to work in Firefox (6), but it appears to work in the latest version of Chrome, as well as IE 6-9.

I wouldn't rely on it, and would just consider it one of the oddities of browsers features.

Davy8
  • 30,868
  • 25
  • 115
  • 173
  • 2
    It's documented as part of the HTML Living Standard: https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object. I'm not sure when exactly it was added. Also in the time since this answer was posted, W3C has come out with an HTML 5.2 recommendation, and it appears there as well. – johncip Feb 26 '19 at 06:42
  • 2
    Actually, it's in the HTML5.1 spec as well. – johncip Feb 26 '19 at 06:49