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
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!