Cómo comprobar si un elemento existe en el DOM visible

Encontrar un elemento en el DOM usando su ID es una tarea común en JavaScript. Sin embargo, ¿qué sucede si necesita verificar la existencia de un elemento sin utilizar este método?

Identificación de elementos invisibles

Cuando un elemento se elimina del DOM, su referencia en una variable de JavaScript aún existe. Esto puede generar resultados inesperados al verificar la existencia de elementos usando typeof o === null.

Enfoque actual

La función isNull() intenta evitar este problema configurando temporalmente una ID aleatoria en el elemento, buscándolo usando getElementById() y luego eliminando la ID temporal. Este enfoque devuelve verdadero si el elemento no se encuentra en el DOM y falso si se encuentra.

Simplificación para la verificación de existencia

Si el objetivo es simplemente verificar si un elemento existe (independientemente de su visibilidad), un método más sencillo es utilizar cualquiera de los métodos de selección de elementos del navegador:

var elementExists = document.getElementById("find-me");

Para un valor booleano valor, puedes usar !! antes de la llamada al método de selección. Además, se pueden utilizar métodos como querySelector() y getElementsByTagName().

Comprobación de la visibilidad en el DOM

Para comprobar específicamente si un elemento existe en el DOM visible, el método contiene() puede ser utilizado:

document.body.contains(someReferenceToADomElement);

Este método devuelve verdadero si el elemento está presente en el DOM y falso en caso contrario.