10

I saw a strange behavior. I created a Input.

<input id='inputid' value='value'/>​

and tried to access it directly from id. Instead of throwing an exception console was showing above input element.

console.log(inputid);

After that I tried to compare it with getElementById

console.log( inputid == document.getElementById('inputid'));

console was showing true.

You can see this behavior on jsfiddle.

Is it a strange behavior or am I missing something?

I tested it in Chrome 23.0.1271.10 dev-m and firefox 15.0.1.

Anoop
  • 23,044
  • 10
  • 62
  • 76
  • I don't understand why these questions keep getting up-votes when they're obvious duplicates... – David G Sep 30 '12 at 18:53
  • 7
    @David - Instead of posting a snide comment, if you keep seeing duplicates you should vote to close and link to the exact duplicate. – Travis J Sep 30 '12 at 18:54
  • possible duplicate of [IE/Chrome: are DOM tree elements global variables here?](http://stackoverflow.com/questions/3434278/ie-chrome-are-dom-tree-elements-global-variables-here) – zzzzBov Dec 11 '12 at 15:28

2 Answers2

6

Back in the days of 4.0 browsers, Microsoft decided that it would be convenient to create, for every element with an id, a global variable with the same name as the id containing a reference to that element.

Support for this has appeared in some other browsers (in some rendering modes). This support is not universal so the feature should be avoided.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Tested in IE8, chrome, ff, all showed `true`. What browser doesn't support this? To note: I have seen this variable as available before and was a little surprised to find out that it is in fact defined. – Travis J Sep 30 '12 at 18:53
  • Hmm… seems more more browsers may have added support since I last tested it. – Quentin Sep 30 '12 at 18:55
  • @Quentin Is it applicable to all type of html nodes? – Anoop Sep 30 '12 at 18:57
  • @Quentin - I wonder when this variable is defined. If I define `var inputid = "myInput";` in the head it would seem that after render the automatic generation of this variable for the input element would overrite the defined variable. – Travis J Sep 30 '12 at 18:57
  • 3
    @Shusl — A quick tests suggests that it might be, you still shouldn't use it as (to the best of my knowledge) it isn't standardised (and it leads to code where the source of a variable value is distinctly non-obvious). – Quentin Sep 30 '12 at 18:58
  • @Quentin I am not using it but curious to know more about it. – Anoop Sep 30 '12 at 18:59
3

To just expand a little on this situation based on a curiosity:

<html><head>
<script type="text/javascript">
  var overWrite = "world";
  window.onload = function(){ alert(overWrite); };
</script></head><body>
<input id="overWrite" value="hello" />
</body></html>

Will alert "world". However, with //var overWrite = "world"; (as in with that line commented out), it will alert the [html element]. Note that this is after the page loads so it is persistent and not some sort of temporary assignment.

Strongly agree that it should not be used due to inconsistency and readability issues.

EDIT

Still was curious about this issue and did some more testing. I was curious if access was faster with document.getElementById or by variable reference. Made this test:

html

<div id="contentZone"></div>

js

var startTime = Date.now();
for( var i = 0; i < 1000; i++){
    for( var n = 0; n < 2000; n++){
        var ni = document.getElementById("contentZone");
    }
}
var endTime = Date.now();
console.log( endTime - startTime );

var aTime = Date.now();
for( var i = 0; i < 1000; i++){
    for( var n = 0; n < 2000; n++){
        var ni = contentZone;
    }
}
var bTime = Date.now();
console.log( bTime - aTime );

console

431
814

Tested on this machine only, but it would seem that using document.getElementById is still faster making this variable access even less desirable.

Travis J
  • 81,153
  • 41
  • 202
  • 273