Verifique se o elemento existe no DOM em JavaScript

Para verificar se existe um elemento correspondente, use a busca adequada à forma como você o identifica. document.getElementById() retorna o elemento correspondente ou null; portanto, teste se o resultado é truthy. As buscas por classe e por tag retornam coleções; verifique o length, pois até uma coleção vazia é truthy.

Use getElementById() para encontrar um único elemento correspondente

Use getElementById() quando souber o id exclusivo de um elemento. Ele retorna um Element quando encontra o ID ou null quando nenhum elemento tem esse ID. Informe o ID sem o prefixo #.

O exemplo a seguir procura, em uma página do navegador, o link com ID help-link:

O código e os rótulos ou saídas exibidos nesta seção permanecem em 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>

A variável exists é do tipo Boolean. Boolean(helpLink) ou !!helpLink também converte o resultado em true ou false. Use !== null quando quiser explicitar na verificação o que a busca retorna.

Verifique correspondências por classe, nome e tag

Use getElementsByClassName() para buscar uma classe, getElementsByName() para buscar um atributo name e getElementsByTagName() para buscar uma tag de elemento. Esses métodos usam atributos diferentes: por exemplo, o valor de uma classe fica em class, enquanto o nome de um controle de formulário fica em name.

O código e os rótulos ou saídas exibidos nesta seção permanecem em 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() e getElementsByTagName() retornam objetos HTMLCollection dinâmicos. getElementsByName() retorna um NodeList. Quando não há correspondências, o comprimento da coleção é 0; ela continua sendo um objeto, não null. Para verificar se há alguma correspondência, use collection.length > 0 (ou collection.length !== 0).

Entenda os resultados das buscas e as verificações booleanas

Uma busca que retorna um único elemento e outra que retorna uma coleção exigem verificações de existência diferentes. Converta o resultado de getElementById() com Boolean(element) ou compare-o com null. Para uma coleção obtida por uma busca de classe, nome ou tag, verifique length. Aplicar !! diretamente à coleção não indica se ela contém algum elemento: tanto uma coleção vazia quanto uma com elementos é truthy.

Escolha a API conforme a pergunta: “existe um elemento com este ID?” ou “quantos elementos correspondem a este critério?”. Se ainda precisar dos elementos, mantenha o elemento ou a coleção retornada em vez de convertê-los em Boolean cedo demais.

Execute este exemplo:

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

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

O exemplo ilustra isoladamente a verificação do comprimento da coleção; os trechos específicos do DOM acima são código-fonte para páginas do navegador e não são executados aqui.

Verifique se um nó está dentro de document.body

document.body.contains(node) retorna um Boolean que indica se node é o próprio body ou um descendente dele. A verificação considera a árvore do DOM, não se o nó está visível na tela. Um nó pode estar no body e ainda assim ficar oculto por CSS ou não ser exibido por outro motivo.

Passe um único nó para contains(). Se uma busca retornar uma coleção, escolha primeiro um item e considere que ela pode estar vazia. Por exemplo, const matches = document.getElementsByName("query"); const isInBody = matches.length > 0 && document.body.contains(matches[0]); verifica somente o primeiro nó correspondente; não testa todos. Se a pergunta for se algum nó correspondente está no body, verifique os itens individualmente.