document.getElementById ('ID'). func (...) vs ID.func (...) [duplicate]


Yesterday I came across a curious thing , I had no idea what to do in this way.

So far I've done it this way:

document.getElementById('a').innerHTML = 'CONTENT';
<div id="a"></div>

Always but always I have seen this, until yesterday I noticed that:

a.innerHTML = 'CONTENT';
<div id="a"></div>

It also works.

Clearly, no readability is lost, and a great advantage is that we do not write as much ( document.getElementById('...') ), and can then directly reference the element with just the id. I assume that the document.getElementById('...') function is implicitly running on it, but:

Why is not this way used anymore? At least I (remember me) had never seen it.

What are the advantages / disadvantages of each other? (if any)

asked by anonymous 24.01.2017 / 12:32

2 answers


It's basically a visibility problem. What happens if your id is a property of the window object? I do not know if you know, all properties that you access globally or are in window .

The question code is the same as:

window.a.innerHTML = 'CONTENT';
<div id="a"></div>

This is not standard. It's something that Internet Explorer started doing (putting the DOM IDs inside the window object), a lot of programmers started using it and other browsers felt compelled to maintain compatibility. But you can not count on it.

Run this:

top.innerHTML = 'CONTENT'; //top é uma propriedade de window
<div id="top"></div>

So in most cases it will work, but in some cases it will not. Either because the implementation does not accept this form, or because it will confuse with something of the object. Is not it better to keep a style and use only one form that will always work? Use the form with getElementById() that is default, will always be supported on any implementation of the DOM as per the HTML / EcmaScript specification.

It was never intended to have this compact form by accessing the ID directly. Although to be honest, here's a bit of opinion, you should even allow it, but in the right way, document and not window , and IDs are segregated into a specific property to avoid confusion with the object .

This technique is to give you a local object (I hope you are using a var or let ) that is not confused with other properties.

I think you could have done something like this:

document.ids.a.innerHTML = 'CONTENT';

There are people who think that they do not even need all this and id alone should solve it and the programmer should turn around if there is any name conflict with any property. Makes some sense. It could even have a default form in the language, like using #top to not confuse with top .

Actually I already think wrong window is the default object. document is what you use most.

24.01.2017 / 12:54

I believe that the only reason for not using the direct id element is to avoid conflicts, since all global variables, including ids that are stored in browsers leaving this information "crowded", is therefore deprecated using GetElementById doing what it says takes the element by its id.

So this feature of retrieving the direct id may or may not work depending on your browser and the way it manages these "global variables."

24.01.2017 / 13:18