Directly reference HTML elements [duplicate]

Answer 1

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.

Answer 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.

Answer 3

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.