4

Can someone tell me the difference between calling an HTML elment with id="myDomObect"?:

var myObj = document.getElementById('myDomObect');

&

var myObj = myDomObect;
Improve this question
7
  • the first is more formal (standard) while I remembered that some old version of some old browser does not support the second. Commented Oct 13, 2014 at 1:56
  • IE has long supported name and ID as globals, everyone else caught up to this a few years back. it's one of the few good parts of IE that got universally adopted before IE's special tricks went away (innerHTML, and outerHTML being the other) Commented Oct 13, 2014 at 2:00
  • 1
    FWIW, while innerHTML was a good part of IE that got copied this is a very bad part that got copied. Commented Oct 13, 2014 at 2:13
  • 1
    possible duplicate of Do DOM tree elements with ids become global variables? Commented Oct 13, 2014 at 2:21
  • 1
    good points (relative to this over-blown issue) on stackoverflow.com/questions/25325221/…... Commented Oct 13, 2014 at 2:23

2 Answers 2

Reset to default
8

Use the first form or a wrapper such as jQuery. The second form,

var myObj = myDomObect;

Translates to

var myObj = window["myDomObect"];

This "works" because of an old, old hack in which ID's were exposed as global window properties (IIRC this was a misfeature from the start) and thus we are still blessed with the behavior 20 years later.. and yes, it will work in the very latest Chrome.

However, such a shorthand should not be used for multiple reasons:

  1. It will not work as originally written in "strict mode" (but it will work with the second form)

  2. It does not convey the operation - namely that a DOM element is requested/fetched (by ID).

  3. It does not work for IDs that collide with window properties; eg. <div id=history></div> would result in "unexpected behavior" if accessed this way. (This doesn't affect getElementById code that correctly uses local var variables in a function.)

  4. Behavior is not defined when duplicate IDs exist in the document (which is allowed); the behavior for getElementById has been codified in by DOM 4: "getElementById(elementId) method must return the first element [with the ID], in tree order.."

See also:

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

why is an "old old hack" specified by brand new specs?
@dandavis Some things exist for backwards-compatibility, not because they are good or relevant/useful.
1+2 are decent points, but 3+4 would still apply using var and getElementById()...
1

The first is how the "real" DOM API works (another option is document.querySelector("#myDomObject")). The second is how browsers have started implementing automatic hoisting of id'd elements, since ids are supposed to be unique. In a twist of "what were you thinking", this can lead to hilarious conflicts where variables that have the same name as HTML elements with an id don't take precedence and the variable you though you were using is suddenly an HTML element.

Improve this answer

7 Comments

that can't happen, any local or global variable gets in front of the element, which is the part that most folks complain about.
you'd think, wouldn't you? Turns out the way it was implemented in Chromium frequently let this happen anyway.
"was" as in "no longer", or as in "how it got the way it is now" ?
I haven't tried in recent weeks, but I ran into it a few months ago, so it could still be the case, it could be fixed, but it's worth bearing in mind that this is not standard DOM spec and can create odd code behaviour.
Why is HTML5 not a standard dom spec? w3.org/TR/2011/WD-html5-20110525/…
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.