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

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

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

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!

Por que não dá pra resolver isso com setInterval?

Antes de sair copiando o código, vale entender o porquê

A saída preguiçosa seria jogar um setInterval checando o elemento de tempos em tempos, tipo um vigia que passa na porta de vez em quando

Funciona? Mais ou menos

O problema é que ele roda mesmo quando nada mudou, e ainda te deixa na mão no intervalo entre uma checagem e outra

O MutationObserver inverte a lógica: tu não fica perguntando, o navegador te avisa

É a diferença entre ficar olhando a caixa de correio o dia inteiro e ter alguém tocando a campainha quando a carta chega =)

O que aquele objeto de opções está fazendo?

Repare que o observe recebe duas coisas: o elemento e um objeto de configuração

Esse objeto é onde tu diz O QUE quer vigiar

No exemplo acima ligamos attributes, então mudança de atributo dispara o callback (e o classList.add é exatamente uma mudança de atributo)

Já o subtree amplia o alcance pra dentro: não é só o elemento em si, é o que vive abaixo dele também

Ou seja, observer sem opção ligada é vigia sem posto, ele precisa saber pra onde olhar

Existem outras chaves pra outros tipos de mudança, e é por isso que eu insisto na página de documentação: deixa ela aberta do lado enquanto tu testa

Não funcionou? Confere estes pontos:

Antes de achar que o MutationObserver está quebrado, dá uma olhada na lista, é quase sempre um desses

O elemento veio null: se o script roda antes do elemento existir na página, o querySelector não acha nada e não tem o que observar

Tu está observando o elemento errado: se a mudança acontece num filho e o subtree não está ligado, o observer fica quietinho

O tipo de mudança não bate com a opção: mudou o conteúdo mas tu ligou só atributo? Não vai disparar

E tome cuidado com mais uma coisa: observer criado é observer vivo

Se a tela onde ele nasceu já saiu do ar e ele continua rodando, tu tem vigia trabalhando de graça ali

A documentação mostra como encerrar a observação, e essa é a parte que quase ninguém lê

Onde isso salva a tua pele no dia a dia:

Exemplo de artigo é bonitinho, mas cadê o uso real? Se liga nos casos que aparecem mais

Conteúdo que aparece depois: aquele elemento que só existe quando outro script termina de carregar

Widget de terceiro: chat, player, banner, coisa que tu não controla o código e só consegue reagir depois que ela se desenha na tela

Extensão de navegador ou userscript: tu está mexendo numa página que não é tua, então observar é praticamente a única forma de saber que algo mudou

App que troca de tela sem recarregar: o DOM muda embaixo do teu pé e tu precisa reagir a isso

Sacou o padrão? Sempre que tu não manda no QUANDO a mudança acontece, o observer entra

MutationObserver ainda faz sentido hoje?

O post é antigo e a pergunta é justa, então bora ser honesto aqui

Faz sentido sim, mas o cenário mudou bastante desde que ele saiu

Hoje boa parte do front roda em framework reativo, e nesses casos a tela se atualiza a partir do estado, não do DOM na mão

Então se tu está dentro de um React ou Vue da vida e bateu vontade de observar o DOM manualmente, respira: na maioria das vezes isso é sinal de que tu está brigando com o framework em vez de usar ele

O MutationObserver brilha na borda: código de terceiro, página que não é tua, script solto, integração onde tu não manda no ciclo de renderização

E tem um detalhe bem atual: com IA escrevendo código, MutationObserver começou a aparecer em lugar que não pedia isso

A IA resolve o sintoma (a tela mudou) e não a causa (por que esse dado não está no estado?)

Se tu revisa código gerado, essa é uma boa pergunta pra fazer antes de aprovar o PR