Neste artigo você vai aprender a como verificar mudança de DOM com JavaScript, utilizando o MutationObserver
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!