20

I am new to javascript, and I just noticed a javascript behavior that I haven't seen documented anywhere. If I have a DOM element with an assigned id, say "x", then in my javascript, that element is automatically assigned to variable x. I see this in chrome and safari. Is this a documented feature of javascript?

For example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id='x'>
<input type='text' name='info' id='info'/>
<input type='submit' name='submit' value='Complete'/>
</form>
<script type='text/javascript'>
  window.onload = function() {
    alert( x==document.getElementById('x') );
    info.value = 'Test me!';
  }
</script>
</body>
</html>

When loaded, it will alert true, and the input area will show 'Test me!'. If this is the right behavior, why do we need document.getElementById at all?

user560494
  • 915
  • 1
  • 9
  • 12
  • 1
    WOW! I've been coding JavaScript for **years** and I've never ever known about this! I actually found this answer because I was trying to find a way to simplify getting references to UI elements in JavaScript instead of having redundancy all over the place... – Andrew Apr 01 '20 at 16:50

3 Answers3

12

This behavior is documented in the HTML standard (chapter 6.2.4).

The standard defines "named elements" which are HTML elements that have either a name or id attribute set. (Note that the name attribute is only defined on certain types of HTML elements.)

For each named element, the browser (environment) defines a corresponding global property.

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • 4
    As of my comment, Chrome and Firefox implement this behavior but IE11 does not. I must confess I didn't even know about this feature until now. – NobodyMan Apr 07 '14 at 21:10
  • So that's the purpose of `window` being a global variable... – Andrew Apr 01 '20 at 16:50
2
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="w"></div>

        <script type="text/javascript">

        alert( w );

        w = null;

        alert( w );

        </script>
    </body>
</html>

Try this test in IE8. You will figure out that w is global and cannot be overwritten. Change "w = null" in "var w = null" and reload (after emptying cache)...

IE8 checks for variables before runtime and removes the global correspondent. I really can't await the day when web developers don't have to support IE8 any more...

HINT: don't use variable names equal to DOM element id's.. OMG OMG

faebster
  • 727
  • 7
  • 13
-2

This is an IE-only non-standard feature.

Do not rely on it.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • Oh no! Horrible feature! I hope this is an April Fools' Day joke. – Marcel Korpel Apr 01 '11 at 15:49
  • 3
    It's not non-standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-window-nameditem See the bullet: *"HTML elements that have an id content attribute whose value is name."* – Šime Vidas Apr 01 '11 at 15:56
  • 3
    This is *not* IE-only, try it in other browsers using http://jsfiddle.net/KooiInc/ghY99/. – KooiInc Apr 01 '11 at 15:58
  • 2
    This behavior is present in IE9, Chrome, Opera and Safari. Only Firefox 4 does not implement this. See here: http://jsfiddle.net/WbwEC/ – Šime Vidas Apr 01 '11 at 16:00
  • @Marcel It's real. Fortunately, existing global properties cannot be replaced - if you have this `
    `, then `document` will still point to the `document` object, and not the DIV.
     – Šime Vidas Apr 01 '11 at 16:19