8

when creating web pages I have always used function 

var someVariable = document.getElementById('myID');

to get a reference to an element object. It was recently suggested to me that this is not necessary, because there already is such a variable. It's name is equal to the id. I've tested it and it seems to work.

<div id="myID">some text</div>
<a href="someplace" onclick="alert(myID.innerHTML)">click here</a>

This code works and it alerts "some text" as expected. There is just a warning in firefox error console:

element referenced by ID/NAME in global scope. Use WC3 standard document.getElementById() instead....

I am mostly using jQuery by now but I need to prove a point to my boss at work or else I will have have to buy him a box of chocolate :-).

Any ideas why the upper code shouldnt work or why is it a very wrong idea to use it(warning in firefox is not enough)???

Thanks for your answers

Voooza
  • 89
  • 1
  • 2

3 Answers3

10

Any ideas why the upper code shouldnt work or why is it a very wrong idea to use it(warning in firefox is not enough)???

Because it's non-standard (but not for long). Although some browsers do assign elements with an ID to global variables, there's no obligation for them to do so (and not all of them do). Older versions of Firefox, for instance, do not exhibit this behavior. There's also the risk of naming collisions.

Using document.getElementById() ensures that all browsers behave exactly the same (well, more or less cough) when getting a handle to an element.

See bobince's excellent answer to a similar question for more information.

Community
  • 1
  • 1
Andy E
  • 338,112
  • 86
  • 474
  • 445
  • 1
    +1, as far as I *know*, it's never been standardized -- just well-supported. But separately, there are valid `id` values that you can't use via `window.X`, such as the id "foo[bar]". That's a valid HTML `id` value, but while some browsers will find the element if you do `window["foo[bar]"]`, some browsers (Firefox, for instance) will not: http://jsbin.com/otoso4/2 – T.J. Crowder Feb 18 '11 at 14:20
  • @TJC, no, it hasn't been standardized yet but it is in the HTML5 draft (see updated answer). Obviously, the overseeing committee saw that most browsers behaved this way and decided that they all should. A really stupid idea, IMO (much like other [monkey see, monkey do parts of the spec](http://whattheheadsaid.com/2010/12/scoping-with-html-and-inline-event-attributes)). – Andy E Feb 18 '11 at 14:25
8

element referenced by ID/NAME in global scope. Use WC3 standard document.getElementById() instead....

Your current call would result in possible variable collision.

Picture this:

<script>
    var myID = 'foo'; 
</script>
<div id="myID">some text</div>
<a href="someplace" onclick="alert(myID.innerHTML)">click here</a>

myID is now not your HTML element, but a variable containing 'foo'. Example.

You should always use document.getElementById() because it is built for the specific function to retrieve HTML elements and not JavaScript variables.

Aron Rotteveel
  • 81,193
  • 17
  • 104
  • 128
  • @Crowder Global vars also go in the `window` object. – Aistina Feb 18 '11 at 14:19
  • @Aistina: Sorry, I misread your answer somehow. For some reason, I thought you were dealing with an inner scope in a function, but unless you've edited your answer, you're clearly working at global scope. Sorry 'bout that. – T.J. Crowder Feb 18 '11 at 14:37
1

Presumable for cross browser compatibility. The second version doesn't work in Chrome. Which mean it would probably fail in Safari as well.

xzyfer
  • 13,937
  • 5
  • 35
  • 46