Is referring to an element via its id considered bad?

Navigation
11

In Javascript, you can reference any element that has a id (and in some cases a name ) by simply using an identifier with the same name - without having to declare it: / p> 

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

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

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

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 built-in function, 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 functionality? Should we only use document.getElementById instead? Or would it be a simple matter of only using "healthy" names for the ids of our elements (ie not using anything that is already defined in the JavaScript language)?

Li some reviews in SOen - usually saying no to use - as well as a discussion on w3.org with arguments against and for, but I'm not sure. Is there any objective reason to avoid this functionality?

P.S. Although there was pressure for this functionality to be restricted to quirks mode, it was apparently standardized by HTML5 - so that even though there were incompatibilities in the past, future browsers must consistently support it.     

asked by anonymous 26.06.2014 / 20:41

3 answers

1
One of the disadvantages of using globally dynamically created global variables via IDs is that it becomes more difficult to use a static analysis tool such as JSHint to detect typos in accidentally created global or variable names. I usually prefer that my variables have lexical (static) scope.

Regarding accessing elements via window instead of the variable name ( window['teste'] ) is ambiguous if you are accessing a global variable or an element id. I'd rather use getElementById to make 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) }
    
26.06.2014 / 22:45
3

You've already given the answer: keeping such a code would be impractical.

But there is another point against. According to the test below, you can see that getElementById runs about 50% faster in Firefox than using the ID name directly. There was not much difference in Chrome. It's worth testing in IE.

link

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

    
26.06.2014 / 22:28
2

Interface Window - > window[name]

  • Returns an indicated element or a collection of elements.

As a general rule, counting on this will lead to brittle code. Which IDs will hold mappings 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 the active document . The return of it is generated by the user-agent (this part is the one that makes it not recommendable).

There has been a move to ensure compatibility with 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 : link

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

Source: link

    
26.06.2014 / 22:09
Solution for scanning documents by browser WPF Form is going behind all windows when a ComboBox is selected