Como verificar se elemento existe no DOM com JavaScript

Neste artigo você vai aprender a verificar se elemento existe no DOM, utilizando uma abordagem super simples e rápida

Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!

Para resolver o nosso problema vamos primeiramente ter que selecionar o elemento no DOM

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Podemos utilizar qualquer um dos métodos:

• querySelector;
• getElementById;
• getElementsByClassName;

Tendo o elemento selecionado, ou pelo menos aplicando o resultado do seletor a uma variável

Vamos utilizar o método contains, que fica em body, uma propriedade de document

Este método nos retorna um booleano, se for verdadeiro é por que o elemento está presente na página/DOM

Vamos ver um exemplo prático do que foi explicado acima:

const myElement = document.querySelector("div")

const exists = document.body.contains(myElement)

console.log(exists)

Na primeira linha há a seleção do elemento e depois criamos a variável exists

Esta variável contém o resultado do método contains, que é um true ou false

Caso o elemento não esteja presente no DOM teremos o resultado de false, fácil não? 🙂

Conclusão

Neste artigo você aprendeu a como verificar se elemento existe no DOM

Utilizamos um método de seleção de elementos, que foi o querySelector

E depois validamos se o elemento está no DOM com o método contains

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!