JavaScript

Como verificar mudança de DOM com JavaScript

2 de maio de 2022

Como verificar mudança de DOM com JavaScript

Neste artigo você vai aprender a como verificar mudança de DOM com JavaScript, utilizando o MutationObserver

verificar mudança de DOM capa

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

Em JS temos uma classe chamada MutationObserver que nos permite detectar alterações no DOM e realizar alguma coisa após a alteração

Recomendo após o exemplo do artigo verificar a documentação, para se aprofundar mais no que este recurso tem a te oferecer

Veja o exemplo a seguir:

const observer = new MutationObserver(function(mutations, observer) {

	console.log(mutations, observer);

	console.log("Do something...")

});

const input = document.querySelector("#my-input")

observer.observe(input, {
  subtree: true,
  attributes: true
});

input.classList.add("teste")

Primeiramente criamos o observer, que basicamente instancia a classe MutationObserver e também contém as ações que queremos realizar

Depois selecionamos o elemento a ser monitorado e executamos o método observe nele

Por último é realizada uma simples adição de classe, que causa uma mudança de DOM

Esta mudança ativa o observer, sendo possível ver as mensagens do console.log

Ou seja, é exatamente o que estamos procurando!

A função monitora o nosso elemento, até pela mais simples mudança

E neste intervalo temos como executar algo que precisamos alterar no nosso app, simples não é?

Mas ainda recomendo que você veja a página de documentação para entender todas as possibilidades deste recurso, pois ele é mais amplo do que o exemplo aqui apresentado

Conclusão

No artigo de hoje você viu como verificar mudança de DOM em JS

Utilizamos a classe MutationObserver, que após ser instanciada nos dá várias possibilidades

Precisamos escolher o item a ser monitorado e executar uma ação quando ele é alterado

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!

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x