Explorando a Utilidade do Mutation Observer em JavaScript

CursoCriando uma aplicação com área administrativa utilizando o Laravel

As páginas web modernas são dinâmicas e interativas, com elas podemos fazer navegações por horas sem ao menos atualizar a página, como realizar transações bancárias de forma rápida e segura. Por trás de toda essa fluidez, os desenvolvedores precisam conhecer melhor as ferramentas que compõem a sua “caixa de ferramenta”, como, por exemplo, o uso do Mutation Observer no Javascript.

Mutation Observer API é um dos vários recursos disponíveis no navegador web, com ele podemos facilmente monitorar quando um elemento no DOM é alterado, como, por exemplo, verificar se uma <div> mantém o seu valor original, em caso de mudança, podemos chamar uma função de callback para processar algo.

Para esse artigo vamos criar um exemplo que monitora quando um item de uma lista de tarefas é adicionado há um elemento <ul>. No final do artigo você também pode conferir a nossa videoaula que vai ajudar a turbinar os seus estudos de Mutation Observer.

Primeiramente, tudo o que devemos fazer é declarar uma variável que contenha acesso ao elemento na qual vamos observar.

const list = document.querySelector('#list-items')

Vamos partir do ponto que esse elemento esteja sendo populado em algum momento da nossa aplicação, sendo o list-items se refere a um elemento <ul>.

Agora devemos declarar mais uma variável para conter a instância do nosso observador. Note no código abaixo que a classe MutationObserver recebe uma função de callback. Atribuímos uma variável chamada mutations, ela retorna todos os elementos que foram modificados e com isso podemos percorrer essa lista.

const observer = new MutationObserver(mutations => {
//...
})

Por fim, devemos dizer ao navegador que ele deve começar a observar as mudanças no elemento, e mais, podemos especificar para monitorar mudanças em elementos filhos também.

observer.observe(list, { childList: true })

Por questões de boas práticas, é interessante parar de executar o monitoramento quando determinada condição for satisfeita, isso melhora o desempenho da página.

observer.disconnect()

Você pode conferir nosso exemplo completo que foi utilizado na nossa videoaula, que está disponível logo abaixo.

index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Muation Observer - SatellaSoft</title>

    <style>

        #item-to-list{
            outline: none;
            background-color: #eee;
            font-size: 16px;
            border: 1px solid #ccc;
            padding: 5px 15px;
        }

        #btn-add-to-list {
            background-color: #ef3e39;
            color: #fff;
            font-size: 16px;
            border: none;
            padding: 5px 15px;
            cursor: pointer;
            transition: .3s all;
        }
        #btn-add-to-list:active {
            background-color: #992e2a;
        }

        #list{
            max-width: 360px;
            width: 100%;
            margin: 0 auto;
        }

        #list-items{
            font-size: 16px;
        }
    </style>
</head>

<body>

    <div id="list">
        <div id="inputs">
            <input type="text" id="item-to-list">
            <button id="btn-add-to-list">Adicionar</button>
        </div>

        <ul id="list-items">
          
        </ul>
    </div>

    <script src="script.js"></script>
</body>

</html>

script.js

'use strict'

//Acessa os elementos da página
const text = document.querySelector('#item-to-list')
const btn = document.querySelector('#btn-add-to-list')
const list = document.querySelector('#list-items')


//Adicionamos um evento para obter e inserir conteúdo na lista
btn.addEventListener('click', () => {

    if (text.value == '')
        return alert('Insira um item na lista')

    let li = document.createElement('li')
    li.innerText = text.value

    list.appendChild(li)
    text.value = ''
})

const observer = new MutationObserver(mutations => {

    mutations.forEach(mutation => {
        console.log(mutation)

        if (mutation.type == 'childList') {
            console.log(mutation.target.innerText)
        }
    })
})

observer.observe(list, { childList: true })

//Para de observar
//observer.disconnect()