MutationObserver es una utilidad poderosa en JavaScript que te permite observar y reaccionar a los cambios en el DOM. En este tutorial, aprenderás cómo utilizar MutationObserver paso a paso con ejemplos prácticos.

1. Introducción a MutationObserver

MutationObserver es una API proporcionada por el navegador que permite observar cambios en un árbol DOM. Esto significa que puedes configurar un observador para observar cambios como la adición y eliminación de nodos, cambios en atributos, y más.

2. Crear un MutationObserver

Para crear un MutationObserver, necesitas instanciarlo y especificar un callback que se ejecutará cada vez que se detecten cambios.

const observer = new MutationObserver(callback);

La función `callback` recibe una lista de objetos `MutationRecord` y un observador (`MutationObserver`) como parámetros.

3. Ejemplo Básico

Veamos un ejemplo básico donde observamos los cambios en los hijos de un elemento específico.

const targetNode = document.getElementById('observed-element');

const config = { childList: true };

const callback = function(mutationsList, observer) {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
  }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

En este código, `targetNode` es el elemento cuyo hijos estamos observando. El objeto `config` define los tipos de cambios que queremos observar, en este caso, el cambio en la lista de hijos (`childList: true`).

4. Observar Múltiples Tipos de Cambios

También puedes configurar el MutationObserver para observar múltiples tipos de cambios, como cambios en atributos además de los cambios en la lista de hijos.

const config = { attributes: true, childList: true, subtree: true };

const callback = function(mutationsList, observer) {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
    else if (mutation.type === 'attributes') {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};

observer.observe(targetNode, config);

En este ejemplo, hemos agregado `attributes: true` para observar los cambios en los atributos, y `subtree: true` para incluir el árbol DOM entero del objetivo especificado.

5. Desactivar el Observer

Es importante detener el observador cuando ya no es necesario para liberar recursos. Puedes hacer esto llamando al método `disconnect`:

observer.disconnect();

Ejemplo Completo de MutationObserver con HTML y JavaScript

A continuación, te presento un ejemplo completo de cómo utilizar MutationObserver con HTML y JavaScript para observar cambios en el DOM.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" c>
  <title>Ejemplo MutationObserver</title>
</head>
<body>
  <div id="observed-element">
    <p>Elemento Hijo 1</p>
    <p>Elemento Hijo 2</p>
  </div>
  <button id="addNodeBtn">Agregar Nodo</button>
  <script src="app.js"></script>
</body>
</html>

JavaScript (app.js)

document.addEventListener('DOMContentLoaded', () => {
  const targetNode = document.getElementById('observed-element');
  const addNodeBtn = document.getElementById('addNodeBtn');

  const config = { attributes: true, childList: true, subtree: true };

  const callback = function(mutationsList, observer) {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList') {
        console.log('Un nodo hijo ha sido añadido o eliminado.');
      } else if (mutation.type === 'attributes') {
        console.log(`El atributo ${mutation.attributeName} ha sido modificado.`);
      }
    }
  };

  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);

  addNodeBtn.addEventListener('click', () => {
    const newNode = document.createElement('p');
    newNode.textContent = 'Nuevo Elemento Hijo';
    targetNode.appendChild(newNode);
  });
});

En este ejemplo, el código HTML crea un contenedor con el ID `observed-element` y algunos elementos hijos. También se incluye un botón que agregará nuevos nodos hijos a dicho contenedor.

El archivo JavaScript (`app.js`) configura un `MutationObserver` para observar el contenedor y detectar cambios en sus nodos hijos y atributos. Cuando se hace clic en el botón, se agrega un nuevo nodo hijo y el observador registra este cambio en la consola.

Ejemplo básico de uso MutationObserver

Conclusión

MutationObserver es una herramienta valiosa cuando necesitas reaccionar a los cambios en el DOM en tus aplicaciones web. Este tutorial cubre los conceptos básicos y cómo utilizarlos con ejemplos prácticos para ayudarte a comenzar. Con esta información, puedes empezar a hacer que tus aplicaciones sean más dinámicas y reactivas.