9

When accessing elements by window.someThing, the "someThing" should be the name of html element. But what I see now, is that I can access an element by id in the same way, without document.getElementById. When has this been changed? It looks like it works in Chrome, IE, Firefox 13, but not in Firefox 12.

For example:

<div id="MyDiv">Content</div>

<script>
    MyDiv.innerHTML = "New Content";
</script>

Why does the example above work? Why don't I have to do:

var MyDiv = document.getElementById('MyDiv');

Is it something new, or has it always been possible and I just didn't know it?

Peter
  • 13,733
  • 11
  • 75
  • 122
Alex Dn
  • 5,465
  • 7
  • 41
  • 79

4 Answers4

4

http://www.quirksmode.org/dom/w3c_core.html#gettingelements
It's been (mostly) implemented since IE 5.5

I can't really find any info on using the ID as variable name. I'd suggest on sticking to getElementById("MyDiv").doSomething instead of MyDiv.doSomething, to improve compatibility. Especially when you're writing larger scripts, you may mix up variable names with id's used in the page. getElementById ensures you "get" the DOM element.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
  • 1
    Actually the main question is about without using getElementById(). getElementById is standard method to get element, but what about not using it...can I use such way to access elements? It looks like it not totally supported in all browsers. – Alex Dn Nov 21 '12 at 12:55
  • This doesn't really answer the question. It points to a document that displays information OP already has. – Joel Etherton Nov 21 '12 at 12:55
  • Where in the link you provide, does it mention the way described in the question? Am I looking over it? – Peter Nov 21 '12 at 12:57
  • It doesn't, I misinterpreted the question. – Cerbrus Nov 21 '12 at 13:01
  • No probs, +1 for changing to helpful answer – Peter Nov 21 '12 at 13:03
1

This is not standard behavior in JavaScript. When adding a variable as you did with var MyDiv, the variable was added to the window object so that it could be accessed directly as if it were a property, but DOM elements were never added. I don't personally know the reasons for the new behavior, but my guess would be that it's just an expansion of the language engine's capability. If you really want to know what the behavior is supposed to be, you could always read the standard: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

Edit: Also, note that the method that is used to get the element is document.getElementById() which comes from the document object model. The method you're referring to is placing an id into the window object which can create conflicts by id. The standard defined method is to get the element from document and avoid putting things into the window. Using the window object in this manner would be similar to using a global variable (which is a bad practice re: http://www.javascripttoolbox.com/bestpractices/#namespace)

Joel Etherton
  • 37,325
  • 10
  • 89
  • 104
1

AVOID IT!

It seems like an amazing feature but I would recommend not using it because if you have divs with id same as that of some global JS variables, it would be conflicting and will also mess-up stuff in some other third party JS files that you include.

But You always have jQuery selectors always with you and not to forget the new querySelector feature in modern browsers :)

Amogh Talpallikar
  • 12,084
  • 13
  • 79
  • 135
  • ..but you don't "always have jQuery selectors always with you" unless you're using jQuery? – Paul S. Nov 21 '12 at 13:36
  • I basically meant, if avoiding boilerplate like document.getElementById is the concern, jQuery and other libraries all have some short hand selectors. – Amogh Talpallikar Nov 21 '12 at 15:27
1

You can find your answer here: Can I Use an ID as a Variable Name?

In short, avoid it.

The reason it works is because the browser actually creates a variable window.document.myDiv

Community
  • 1
  • 1
Peter
  • 13,733
  • 11
  • 75
  • 122