8

Eu sei que o MutationObserver() foi desenvolvido para detectar alterações no DOM do HTML.

Mas gostaria de saber como isso funciona na prática.

Criamos uma situação hipotética, que tal?

Existe uma <div> com id='hipotese' (acredito que ela será observada pelo seu id, correto?)

Está <div> possuí diversos outros conteúdos dentro dela, que são gerados dinamicamente. (não temos controle da quantidade de conteúdo gerado dentro dela)

O que acontece é que existem diversos métodos que atuam nesses conteúdos dinâmicos. (recebem diversos parâmetros vindo desses conteúdos)

No Google Chrome podemos apertar o F12 e sair alterando os atributos deste conteúdo da forma que bem entendermos. E depois de alterados quando acontecesse a chamada dos métodos, os retornos não seriam como o esperado (gerados de forma dinâmica)

-- Fim da situação hipotética --

Como eu consigo observar e detectar a menor e mais simples mudança nestes elementos presentes em nossa <div id='hipotese'> ?

Existe alguma outra forma de detectar essa alteração?

Sei que o usuário pode desativar o JavaScript, mas nada que não possa ser resolvido com o <noscript>

1
  • A parte "O que acontece é que existem diversos métodos que atuam nesses conteúdos dinâmicos" ficou particularmente confusa para mim. Esses métodos são funções que alteram o conteúdo com base nele próprio, visto que os parâmetros vem deste?
    – Woss
    Commented 30/09/2017 às 0:23

1 Resposta 1

4

Quando você registra a instância para receber notificações com o método observe você pode passar um objeto especificando quais mutações que devem ser observadas.

Você pode ver as opções disponíveis em MutationObserverInit.

Abaixo segue um snippet exemplificando as alterações.

var hipotese = document.getElementById('hipotese');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log('mutation.type = ' + mutation.type);
    if (mutation.type === 'childList') {
    	for (var i = 0; i < mutation.addedNodes.length; i++) {
        console.log('  "' + mutation.addedNodes[i].textContent + '" adicionado');
      }

      for (var i = 0; i < mutation.removedNodes.length; i++) {
        console.log('  "' + mutation.removedNodes[i].textContent + '" removido');
      }
    } else {
    	console.log('  "' + mutation.attributeName + '" alterado')
    }
  });
});

observer.observe(hipotese, {
  childList: true,
  attributes: true,
  characterData: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

hipotese.className = 'pai';
var filho = document.createElement('div');
filho.textContent = 'filho';
hipotese.appendChild(filho);
filho.className = 'filho';
filho.dataset.teste = 'teste';
hipotese.removeChild(filho);
<div id="hipotese"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .