Is referring to an element via its id considered bad?

Question

In Javascript, you can refer to any element that has a id (and in some cases a name) using simply an identifier with the same name - without the need to declare it:

<div id="teste">Teste</div>

console.log(teste); // <div id="teste">Teste</div>

Except, of course, if there is already a variable with the same name:

console.log(teste); // undefined
var teste = 10;
console.log(teste); // 10

Or if the id in question is already a property of Window (as a function built-in, for example):

<div id="alert">Teste</div>

console.log(alert); // function alert() { [native code] } 

Given these inconsistencies, I ask: is it bad to use this feature? We should only use document.getElementById instead? Or it would be a simple matter of using only "healthy" names for our element ids (i.e. not using anything that is already defined in the Javascript language)?

Li some opinions in Soen - in general saying to nay use - as well as a discussion in W3.org with arguments against and for, but I am not sure. There is some objective reason to avoid this functionality?

P.S. Although there was already pressure for this functionality to be restricted to "quirks mode", apparently it was standardized by HTML5 - so that although had past incompatibilities the future browsers should give consistent support to it.

Answer 1

You already gave the answer: the maintenance of a code like this would be unfeasible.

But there’s another point against it. According to the test below, you can see that getElementById runs about 50% faster in Firefox than using the ID name directly. In Chrome there was not so much difference. Worth testing in IE.

http://jsperf.com/console-element-using-getelementbyid-vs-nothing

That is, in addition to the "maintenance" factor, it is also worse in the "performance" factor".

Answer 2

Window Interface -> window[name]

• Returns a given element or a collection of elements.

As a general rule, relying on this will lead to the brittle code. Which Ids will maintain mapping for this API may vary over time as new features are added to the Web platform.

The Window interface supports named properties. Working for: the id value of any HTML element in working document. Return is generated by the user-agent (this is the part that makes it not recommended).

There has been a change to ensure compatibility with the IE:

[Gecko] [Internet Explorer] [Opera] [Webkit] 
Change how document[name] works to be compatible with both IE (which typically are targetted with <object>) and other UAs (which typically are targetted with <embed>).

Link: http://html5.org/r/6115

Due to these variations between browsers and possible updates as a given example, resource dependency is not recommended.

Source: http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#named-access-on-the-window-Object

Answer 3

One of the disadvantages of using dynamically created global variables via Ids is that it becomes more difficult to use a static analysis tool like Jshint to detect typos in accidentally created variable or global names. In general I prefer my variables to have lexical scope (static).

How to access the elements via window instead of by the variable name (window['teste']) is ambiguous whether you are accessing a global variable or an id of an element. I prefer to use getElementById that makes it clear what you’re doing.

And if your concern is that getElementById is a very long name, this is easy to solve:

 function byId(id){ return document.getElementById(id) }