Like it's not bad enough that JavaScript has implied globals (forget var and you create a global), but the browsers have decided it's a good idea to add more pollution to the global namespace.
This has been a source of frustration before with IE, it's really hard to understand the logic behind it, but it's also happening in other browsers.
Consider this:
<meta name="description" content="test me" />
A normal META tag, right? But in IE this will create in a global variable called "description" pointing to that DOM node. Yep.
alert(description.content); // "test me"
That's pretty annoying. Even more annoying is that getElementById('description') will also point to the DOM node, although it doesn't even have an ID.
A test is born
Anyway, I wanted to test the effect of other name and id attributes in different tags and different browsers. With the exception of Firefox which doesn't create any globals, all other did to some degree. Rather disappointing. I tested IE6, 8 (plus compat view), FF 3.5, Safari 4 and Opera 10.
And below are the results. The yellow x means that testing for the presence of this global returned "undefined", the white o means that the global variable points to an object. So for example continuing with the meta example above, typeof window.description will return undefined in FF (yellow x) and object in IE (white o).
| global | description | IE | FF | Saf | O |
|---|---|---|---|---|---|
| description | <meta name="description"... | o | x | x | o |
| robots | <meta name="robots"... | o | x | x | o |
| paragraph-id | <p id="paragraph-id"... | o | x | o | o |
| paragraph-name | <p name="paragraph-name"... | x | x | x | o |
| form-name | <form name="form-name"... | o | x | o | o |
| form-id | <form id="form-id"... | o | x | o | o |
| input-name | <input name="input-name"... | x | x | x | x |
| input-id | <input id="input-id"... | x | x | o | x |
| link-name | <a name="link-name"... | o | x | x | o |
| link-id | <a id="link-id"... | o | x | o | o |
| div-name | <div name="div-name"... | x | x | x | o |
| div-id | <div id="div-id"... | o | x | o | o |
So...?
So this is a useless feature if you ask me. Not reliable, not cross-browser, maybe considered convenient back when rollover buttons and animated gifs were all the rage (and animated window.status, remember?), but today can only cause troubles where you least expect it. Should be removed in future browser versions.
For the time being we just have to remember to always declare and initialize our local variables because it looks like someone else might also decide to do so for us. Which can lead to errors if we assume too much.
Comments? Feedback? Find me on Twitter, Mastodon, Bluesky, LinkedIn, Threads
