Como usar a API do MutationObserver para alterações de nó DOM

Aqui está um cenário: Rita, uma escritora de revistas está editando um artigo dela online. Ela salva as alterações e vê a mensagem “mudanças salvas!” Só então, ela percebe um erro de digitação que ela perdeu. Ela conserta e está prestes a clicar “Salve ”, quando ela recebe um telefonema irritado de seu chefe.

Após o término da ligação, ela volta para a tela, vê “mudanças salvas!” fecha o computador e sai do escritório.

Além da minha inépcia por contar histórias, notamos, a partir desse cenário curto, que problema essa mensagem persistente era produzida. Assim, no futuro, nós decidimos evitá-lo quando possível e usar um que seja solicitado ao usuário para confirmar clicando nele - ou desaparece por conta própria. Usar o segundo para mensagens rápidas é uma boa ideia.

Nós já sabemos como fazer um elemento desaparecer de uma página, então isso não deveria ser um problema. O que precisamos saber é quando apareceu? Então, podemos fazê-lo desaparecer depois de um tempo plausível.

API do MutationObserver

No geral, quando um elemento DOM (como uma mensagem div) ou qualquer outro nó muda, devemos ser capazes de conhecê-lo. Por muito tempo os desenvolvedores tiveram que confiar em hacks e frameworks devido à falta de uma API nativa. Mas isso mudou.

Agora temos MutationObserver (anteriormente Mutation Events). MutationObserver é um objeto nativo JavaScript com um conjunto de propriedades e métodos. Nos permite observar uma mudança em qualquer nó como DOM Element, Document, Text, etc. Por mutação, queremos dizer a adição ou remoção de um nó e alterações no atributo & dados de um nó.

Vamos ver um exemplo para melhor compreensão. Primeiro faremos uma configuração onde uma mensagem aparecerá no botão, como a que Rita viu. Então nós vamos criar e vincular um observador de mutação a essa caixa de mensagem e codifique a lógica para ocultar automaticamente a mensagem. Experiente?

Nota: Você pode em algum momento ou já me perguntou em sua cabeça “Por que não apenas esconder a mensagem de dentro do evento de clique do botão em si em JavaScript?” No meu exemplo, não estou trabalhando com um servidor, então, é claro, o cliente é responsável por mostrar a mensagem e ocultá-la com muita facilidade. Mas, como na ferramenta de edição do Rita, se o servidor é quem decide alterar o conteúdo do DOM, o cliente só pode ficar alerta e esperar.

Primeiro, criamos a configuração para mostrar a mensagem no botão de clique.

 Mostrar mensagem

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Alterações salvas!"; / * Botão Adicionar evento de clique * / document .querySelector ('button') .addEventListener ('click', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Assim que tivermos a configuração inicial em execução, vamos fazer o seguinte;

• Criar uma MutationObserver objeto com uma função de retorno de chamada definida pelo usuário (a função é definida posteriormente no post). A função será executada em cada mutação observada pelo MutationObserver.
• Crie um objeto config para especificar o tipo de mutações a ser observado pelo MutationObserver.
• Vincule o MutationObserver para o alvo, que é o 'msg' div no nosso exemplo.

(function startObservation () var / * 1) Crie um objeto MutationObserver * / observer = new MutationObserver (função (mutations) mutationObserverCallback (mutations);), / * 2) Crie um objeto de configuração * / config = childList: verdade; / * 3) Cole tudo * / observer.observe (msg, config); ) (); 

Abaixo está uma lista de propriedades para o config objeto identificando os diferentes tipos de mutações. Como no nosso exemplo tratamos apenas de um nó de texto filho criado para o texto da mensagem, usamos o childList propriedade.

Tipos de mutações observadas

Agora, para essa função de callback que é executada em cada mutação observada.

function mutationObserverCallback (mutations) / * Captura a primeira mutação * / var mutationRecord = mutations [0]; / * Se um nó filho foi adicionado, oculte a msg após 2s * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'nenhum'; 

Já que estamos apenas adicionando uma mensagem ao div, vamos pegar a primeira mutação observada e verificar se um nó de texto foi inserido. Se tivermos mais de uma mudança acontecendo, podemos apenas passar pelo mutações matriz.

Cada mutação no mutações array é representado pelo objeto MutaçãoRegistro com as seguintes propriedades.

Propriedades de MutaçãoRegistro

E é isso. nós apenas temos que juntar o código para o passo final.

Suporte de Navegador

Referência

• “Observador de Mutação W3C DOM4.” W3C Rede. 19 de junho de 2015
• “MutationObserver.” Mozilla Developer Network. Rede. 19 de junho de 2015.