Why use getElementById if id is in the window?

Question

Recently in my study I noticed an object that manipulated the DOM of the element that had the same name in its id.

teste.style.border = '1px solid #CCC';
teste.style.width = '500px';
teste.style.height = '50px';

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

Doubt

• Why the ids go to the global space?
• If I can access the element directly through your id, why use getElementById?

Note

Composite name objects are accessible on window

window['teste-id_composto'].style.border = '1px solid #CCC';
window['teste-id_composto'].style.width = '500px';
window['teste-id_composto'].style.height = '50px';

<div id="teste-id_composto">
</div>

Answer 1

The fact that appointed elements^* are part of the properties of document and/or window is unfortunate, the result of very simple applications that there were many years, at the beginning of DOM and Javascript.

Unfortunately because they are used and some browsers promote them they still exist to not break old code, and are even common practice. Have references to elements in the properties of document or window It is a very bad idea, since they occupy the same space as variables in the application code that are run and can be "erased". Yes, declaring a function or variable in the global space overwrites some property that comes from a named element that uses the same name.

What is the safe solution to separate the waters?

=> use document.getElementById() and/or document.querySelector()

What does W3C say?

The HTML 5.1 specification (April 12, 2016) is very clear here and recommends not to access named elements, via document or window. In the specification it says so:

As a general Rule, relying on this will lead to Brittle code. Which Ids end up Mapping to this API can Vary over time, as new Features are Added to the Web Platform, for example. Instead of this, use document.getElementById() or document.querySelector().

That is to say, "as a general rule depend on this method (window[id]) generates fragile code. This technology should be used document.getElementById() or document.querySelector()".

---

Note:

^* - appointed elements (named Elements is the name I know in English) are all the elements that have the attribute id or name defined.

Answer 2

Before there were standards for HTML, CSS and javascript who defined this were the browsers, ie each browser had its own way of doing things, as for example each had a way of catching elements of DOM, for example:

• Internet Explorer 4 used document.all
• Netscape4 wore document.layers

These were the main "market" browsers and were the ones that first implemented Javascript (in IE it was called Jscript)

Since the IE5.01 version, the document.getElementById and document.getElementsByTagName, the only one that didn’t work in IE was the document.getElementsByTagName("*");, that only came to be supported in IE6, for that we had to use document.all yet.

The Ids because they are "unique" elements in IE (although some developers repeat them, which is a mistake) became accessible directly in the references of global variables that in Javascript for browsers is the object window, provided that the DOM was loaded and the variable had not been declared.

IE maintained this feature to maintain compatibility with sites that had been made for previous versions, some browsers imported this feature to try to maintain compatibility

My opinion: at the time it was very common to accuse the browser for not working on a given site, when the problem was in the script, so many engine developers were forced to put these peculiarities in the engines themselves.

In Firefox for example document.layers was still supported, but issued a Warning on the console warning that it would be removed, unlike the Internetexplorer kept many things, such as the document.all (this sometimes generates a DOM list other than document.getElementsByTagName("*");).

There was an engine called iCab (until version 3 of the browser whose engine name was also called iCab, in version 4 onwards it went on to use Webkit and Cocoa API) for Macos which had similar functionalities to IE4 like document.all, This was a way to maintain compatibility with websites made for Internet Explorer.

It is likely (has nothing discussed, it is just an assumption) that with the evolution of browsers and "standards" of Ecmascript the window generate a variable that represents an element by id automatically is removed one day and only what is really needed is maintained, that is if you use something like window.meuElemento, this may fail in the future.

I also don’t recommend using the ID reference because of conflicts with variables that may have been defined and that have the same name as the id (this is a problem that can already occur and does not depend on the future).

Note that there are other properties to get DOM elements like:

• document.forms

  Get forms by index as document.forms[0]

• document.embeds

  Obtains elements <embed> by the index as document.embeds[0]

• window.frames

  Obtains elements <frame> and <iframe> by the index as window.frames[0], note that window.frames does not return the DOM element of (i)frame but the object window from within, this window.frames[0] then it would be the same as doing this document.getElementsByTagName('iframe')[0].contentWindow

Answer 3

The difference is small, it is more in the processing time. "Document" is already an element rendered by Dom, in this sense, when you use getElementById you are capturing the rendered element id itself, and there will be no error if the element does not exist in your document. Which makes the property safer not to make a mistake while at window['id_nome'], is captured by the structure of your global window, what happens in this case is that you capture the window array... There’s not much difference in you, but in the case of window['id_nome'], error may occur, especially if you enter the index erroneously, or try to locate something that does not exist in the window, it also depends a lot on the behavior of the window and the type of browser, IE is a little flawed in this issue. Because if you don’t have a proper handling at some point, you might not find the array index, but nothing that can’t be solved as in the example below:

if (window['id_name']) {
    var el = window['id_name'];
} 

PS: Just be careful using reserved words from the window.