Por qué la propiedad del objeto es aún accesible?

Question

Por qué al obtener el elemento con id "get" no lanza ningún error, pero si obtengo otro, sí lanza error ? soy consciente de que no estoy llamandolo desde el objeto, pero entonces.. no debería también get lanzar error, además entiendo que get es una palabra reservada, pero por qué sucede esto, entonces le estoy cambiando el real valor de get, si es así me gustaría una aclaración documentada?

(function () {
var us = {get: document.getElementById("get"),
          h6: document.getElementById("h6text")};
get.addEventListener("click", function() { console.log("No error") });
h6.addEventListener("click", function(){ // error ?

});
})();

<input value="Obtener" type="button" id="get">
<h6 id="h6text">Bienvenidos</h6>

Answer 1

La documentación

Si revisas la documentación de addEventListener verás que dice lo siguiente:

addEventListener() Registra un evento a un objeto en específico. El Objeto específico puede ser un simple elemento en un archivo, el mismo documento , una ventana o un XMLHttpRequest.

Verás también que la sintaxis es así:

target.addEventListener(tipo, listener[, useCapture]);

Aquí, target puede ser sustituido sin ningún problema por cualquier id de un elemento válido en el DOM.

---

Lo que ocurre en tu código

De lo leído en la doc, podemos concluir que al agregar un listener de esta forma: elId.addEventListener, JS buscará en el DOM el elemento cuyo id sea igual a elId. Si lo encuentra bien, y si no lo encuentra dará error.

Por eso en tu código:

• Esto funciona: get.addEventListener porque en el DOM hay un elemento con un id igual a get
• Esto no funciona: h6.addEventListener porque no hay en el DOM ningún elemento con un id igual a h6.
• He agregado al DOM un elemento con id="h6". Verás que tu anterior código erróneo, ya no lo es, porque se agrega un listener a ese elemento.

He hecho cosas a propósito en el código para que te des cuenta de lo que ocurre en realidad.

(function(e) {
  var us = {
    get: document.getElementById("gets"),
    h6: document.getElementById("h6text")
  };
  gets.addEventListener("click", function() {
    console.log("No error... Valor del elemento: " + us.get.value)
  });
  h6text.addEventListener("click", function() { // error ?
    console.log("No error... Id del elemento: " + us.h6.id)
  });
 h6.addEventListener("click", function() { // error ?
    console.log("ESTE ES EL LISTENER H6, SU ID ES: " + this.id)
  });
})();

<input value="Obtener" type="button" id="gets">
<h6 id="h6text"><a href="#">Bienvenidos</a></h6>
<h6 id="h6"><a href="#">Esto sí que es H6</a></h6>

---

¿Palabras reservadas?

En cuanto a la duda sobre palabras reservadas, tuve la misma duda, plantee la pregunta hace un tiempo: ¿Palabras reservadas en HTML? y la respuesta aceptada es muy clara.

Answer 2

Los navegadores, por temas de compatibilidad con HTML antiguo (creado cuando el navegador mayoritario era Internet Explorer), a menudo han incorporado funcionalidades no estándar o incluso a menudo no recomendadas. Una de estas funcionalidades no recomendadas es poder acceder a cualquier elemento de la página usando su ID como si fuese un atributo de la clase Window. Del repositorio de la W3C en GitHub, si leemos la especificación de HTML5, podemos encontrar esto:

6.3.3. Named access on the Window object

This definition is non-normative. Implementation requirements are given below this definition.

window[name]

Returns the indicated element or collection of elements. 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().

Que viene a significar, en pocas palabras, lo siguiente: funciona, pero no es buena idea usarlo. Es mejor acceder al DOM mediante los métodos document.getElementById() o document.querySelector()

Ejemplo del funcionamiento (lo pongo como muestra, pero recomiendo no usarlo):

console.log(window.get.tagName);
console.log(window.h6text.innerHTML);
window.h6text.addEventListener('click',()=>alert('Has hecho click'));

<input value="Obtener" type="button" id="get">
<h6 id="h6text">Click Me</h6>