If I have a
a.stuff() (it’s like as if
a is a global variable).
However this does not work with FireFox – I will need to use
What is the correct behaviour here? (according to W3 specs that is)
Also I’m interested in how will Chrome resolve the ambiguity if I have a div with id
a yet have a global variable called
a too in my script. Is the behavior going to be random and whacky?
And how would an element with id consisting of hyphens (“-“), colons (“:”), and periods (“.”) be translated (ok i know they can be accessed with
document.getElementById but how will the browser translate it into the global variable that was representing them)
It depends on which spec you read. 🙂
This behavior is not described by the HTML4 specification (c.f., http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#adef-id and http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-name). However, it was introduced by Internet Explorer and then copied in other major browsers for compatibility. FireFox also displays this behavior, but only in quirks mode (and even then its implementation seems buggy).
Regardless of spec compliance, using the global namespace (i.e.,
window) for application code is generally considered bad behavior. Consider referencing element IDs using
document.getElementById() or jQuery convenience methods (e.g.,
$("#a")) and using function-scoped variables to avoid introducing new variables into the global namespace.
There is a longer discussion of this behavior on the WHATWG mailing list.
Since very early days, IE has created global variables that reference elements by their name or id attribute value. This was never a good idea, but was copied by other browsers in order to be compatible with sites created for IE.
It is a bad idea and should not be copied or used.
To answer your extra questions:
…how will Chrome resolve the
ambiguity if i have a div with id a
yet have a global variable called a
too in my script.
In IE (which introduced this behaviour) if a global variable is declared with the same name as an element id or name, it will take presidence. However, undeclared globals don’t work that way. It shoudn’t take much to test that in Chrome (I have but I’m not going to give you the answer).
And how would an element with id
consisting of hyphens (“-“), colons
(“:”), and periods (“.”) be translated
(ok i know they can be accessed with
document.getElementById but how will
the browser translate it into the
global variable that was representing
Exactly the same as any object property name that is not a valid identifier – square bracket notation (i.e. window[‘name-or-id’]).
Technically, this question is opinion, but it’s a good question.
Also, when are these names bound? If an inline script declares a variable and then the element appears later, which has precedence?
It’s cannot be made consistent.
I think document.getElementById is supported by most browsers so far.. Its better and safe using this one..
The worst thing about using elements this way is that they could break at any time if a new API is introduced that has the same name in the global scope.
For example, if you had this prior to the addition of the Performance API
<p id="performance"></p> <script> performance.innerHTML = "You're doing great" </script>
Then that piece of code would’ve stopped working now in recent browsers that implemented the Performance API as a global
performance object was added.