Explorando a Utilidade do Mutation Observer em JavaScript

Com Mutation Observer, podemos elevar a capacidade de resposta das páginas web, aprimorando a experiência do usuário de forma significativa.

Publicado em

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()

 

Gunnar Correa
Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. Fundador da SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção

Todos os nossos cursos em promoção

Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção