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.
