11

If I write html like this:

<div id="foo">Foo<div>

window.foo returns a dom-element and window.document.getElementById("foo") === window.foo returns true.

Why is that? And why does everyone use getElementById?

And on a sidenote: Why was overriding window.foo forbidden in IE7/8? And what happens if I set window.foo = "bar"?

Nils
  • 9,682
  • 6
  • 46
  • 72

3 Answers3

6

I am not sure about the historical perspective, but HTML 5 specifies that elements are candidates to be directly exposed as properties on the window object if they have an id attribute:

The Window interface supports named properties. The supported property names at any moment consist of the following, in tree order, ignoring later duplicates:

[...]

  • the value of the id content attribute of any HTML element in the active document with a non-empty id content attribute.

The problem with this definition is that it only guarantees that if there is a <div id="foo">Foo<div> then window.foo will be defined. It does not guarantee what exactly its value will be (read the spec for the rules on how that is determined; for example, it might return a collection).

So it turns out the answer to "why use getElementById ever?" is simple: because you can depend on it to return what you expect without needing to take into account the whole document.

Jon
  • 428,835
  • 81
  • 738
  • 806
0

In general placing something inside the window object will make it global. For example:

var A = function() {
    window.test = "bla";
    console.log(test);
}
var B = function() {
    console.log(test);
}

A();
B();

However that's not a good practice. You should not rely on any global object, because you may want to move your code to a browser that doesn't have window. Or to nodejs for example.

I find window.foo a little bit wrong, because you may have code that creates a global variable called foo. So, using getElementById ensures you that you always get DOM element.

Krasimir
  • 13,306
  • 3
  • 40
  • 55
0

Window.foo is working fine in your scenario, but what if the Id is something like this "foo-test" instead of "foo", you can see it will not work. it is because Javascript variables are not allowed for dashes in it.... Whereas it will work fine in case of document.getElementById

Abhishek Jain
  • 2,597
  • 1
  • 18
  • 12
  • 3
    `window["foo-test"]`. – Jon Sep 10 '13 at 07:59
  • Yes, in this you got the hash table and tehn searching in it by key, but directly accesing it as a object will create a problem, try this: var foo-test = 'hi'; alert(window.foo-test); – Abhishek Jain Sep 10 '13 at 08:01
  • technically `window.foot` is also a search in the hash table by key. – Karoly Horvath Sep 10 '13 at 08:03
  • @AbhishekJain: "searching the hash table by key" and "directly accessing as an object" are expressions that you chose to use. What actually happens is exactly the same in both cases, only the syntax is different. Of course you cannot use `window.foo-test`, but this still does not answer the question "why use `getElementById`?". – Jon Sep 10 '13 at 08:06