Comprobar si el elemento existe en el DOM en JavaScript

Para comprobar si existe un elemento coincidente, usa el método de búsqueda que corresponda a cómo lo identificas. document.getElementById() devuelve el elemento coincidente o null, así que comprueba si el resultado es verdadero. Las búsquedas por clase y etiqueta devuelven colecciones; comprueba su length, porque incluso una colección vacía, aunque sigue siendo un objeto, se evalúa como verdadera en un contexto booleano.

Usar getElementById() para encontrar un elemento coincidente

Usa getElementById() cuando conozcas el id único de un elemento. Devuelve un Element si encuentra una coincidencia para el ID, o null si ningún elemento tiene ese ID. Pasa el ID sin el prefijo #.

El siguiente ejemplo para una página del navegador busca el enlace con el ID help-link:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<a id="help-link" href="/help">Help</a>
<script>
  const helpLink = document.getElementById("help-link");
  const exists = helpLink !== null;
  console.log(exists);
</script>

La variable exists es de tipo booleano. Boolean(helpLink) o !!helpLink también convierte el resultado en true o false. Usa !== null si quieres que la comprobación indique explícitamente qué devuelve la búsqueda.

Comprobar coincidencias por clase, nombre y etiqueta

Usa getElementsByClassName() para buscar por clase, getElementsByName() para buscar por un atributo name y getElementsByTagName() para buscar por etiqueta. Estos métodos usan atributos distintos: por ejemplo, el valor de una clase va en class, mientras que el nombre de un control de formulario va en name.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<input class="search-field" name="query">
<script>
  const byClass = document.getElementsByClassName("search-field");
  const byName = document.getElementsByName("query");
  const byTag = document.getElementsByTagName("input");

  console.log(byClass.length > 0);
  console.log(byName.length > 0);
  console.log(byTag.length > 0);
</script>

getElementsByClassName() y getElementsByTagName() devuelven objetos HTMLCollection dinámicos. getElementsByName() devuelve un NodeList. Una colección sin coincidencias tiene una longitud de 0; sigue siendo un objeto, no null. Usa collection.length > 0 (o collection.length !== 0) para comprobar si hay alguna coincidencia.

Entender los resultados de búsqueda y las comprobaciones booleanas

Las búsquedas de un solo elemento y las búsquedas que devuelven colecciones requieren comprobaciones distintas. Convierte el resultado de getElementById() con Boolean(element) o compáralo con null. Si la búsqueda por clase, nombre o etiqueta devuelve una colección, comprueba su length. Aplicar !! directamente a una colección no indica si contiene algún elemento: tanto una colección vacía como una que contiene elementos se evalúan como verdaderas en un contexto booleano, pero ambas siguen siendo objetos.

Elige la API según lo que necesites averiguar: «¿hay un elemento con este ID?» o «¿cuántos elementos coinciden con este criterio?». Si después necesitas los elementos, conserva el elemento o la colección devueltos en lugar de convertirlos demasiado pronto en un valor booleano.

Ejecuta este ejemplo:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const matches = [{ id: "help-link" }];
const exists = matches.length > 0;
console.log(exists);

El ejemplo ilustra por separado la comprobación de la longitud de una colección; los fragmentos específicos del DOM anteriores son código fuente para una página del navegador y aquí no se ejecutan.

Comprobar si un nodo está dentro de document.body

document.body.contains(node) devuelve un valor booleano que indica si node es el propio elemento body o uno de sus descendientes. Comprueba si el nodo pertenece al árbol del DOM, no si se ve en pantalla. Un nodo puede estar dentro de body y aun así permanecer oculto mediante CSS o no mostrarse por otros motivos.

Pasa un solo nodo a contains(). Si una búsqueda devuelve una colección, elige primero uno de sus elementos y contempla la posibilidad de que no haya ninguno. Por ejemplo, const matches = document.getElementsByName("query"); const isInBody = matches.length > 0 && document.body.contains(matches[0]); comprueba únicamente el primer nodo coincidente, no todos. Si lo que necesitas saber es si algún nodo coincidente está dentro de body, comprueba los elementos uno por uno.