Como verificar se um elemento existe no DOM visível

Encontrar um elemento no DOM usando seu ID é uma tarefa comum em JavaScript. No entanto, e se você precisar verificar a existência de um elemento sem usar este método?

Identificando elementos invisíveis

Quando um elemento é removido do DOM, sua referência em uma variável JavaScript ainda existe. Isso pode levar a resultados inesperados ao verificar a existência do elemento usando typeof ou === null.

Abordagem atual

A função isNull() tenta contornar esse problema definindo temporariamente um ID aleatório em o elemento, localizando-o usando getElementById() e removendo o ID temporário. Esta abordagem retorna verdadeiro se o elemento não for encontrado no DOM e falso se for encontrado.

Simplificação para verificação de existência

Se o objetivo é simplesmente verificar se um elemento existe (independentemente de sua visibilidade), uma abordagem mais simples é usar qualquer um dos métodos de seleção de elementos do navegador:

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

Para um booleano valor, você pode usar!! antes da chamada do método de seleção. Além disso, métodos como querySelector() e getElementsByTagName() podem ser usados.

Verificando a visibilidade no DOM

Para verificar especificamente se um elemento existe no DOM visível, o método contains() pode ser usado:

document.body.contains(someReferenceToADomElement);

Este método retorna verdadeiro se o elemento estiver presente no DOM e falso caso contrário.