API MutationObserver de JavaScript

Los observadores de mutaciones en JavaScript te permiten supervisar los cambios en el DOM y reaccionar dinámicamente. Esta guía interactiva ofrece un enfoque sencillo y práctico para entender cómo funcionan los observadores de mutaciones, con ejemplos que muestran visualmente los cambios.

Ejemplo de observador de mutaciones

Aquí tienes un ejemplo básico para ayudarte a ver cómo funciona un observador de mutaciones indicando visualmente los cambios en el DOM.

html

<!DOCTYPE html>
<html>
<head>
  <title>Exploring DOM Changes: Live Examples with Mutation Observers</title>
</head>
<body>
  <div id="target" style="background-color: lightgray; padding: 10px;">
    Watch this space for changes!
  </div>
  <button style="margin-top: 10px;" onclick="addNewElement(); changeAttribute();">Add New Element and Change Color</button>
  <div id="log" style="margin-top: 20px;"></div>

  <script>
    // Get the element to observe
    const targetNode = document.getElementById('target');

    // Define configurations for the observer
    const config = { attributes: true, childList: true, subtree: true, attributeOldValue: true };

    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
      for (const mutation of mutationsList) {
        const message = document.createElement('p');
        if (mutation.type === 'childList') {
          message.textContent = 'A child node has been added or removed.';
          message.style.color = 'green';
        } else if (mutation.type === 'attributes') {
          message.textContent = 'The ' + mutation.attributeName + ' attribute was modified.';
          message.style.color = 'blue';
        }
        document.getElementById('log').appendChild(message);
      }
    };

    // Create an observer instance linked to the callback function
    const observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(targetNode, config);

    // Function to add new elements
    function addNewElement() {
      const newElement = document.createElement('div');
      newElement.textContent = 'New element added!';
      targetNode.appendChild(newElement);
    }

    // Function to change attributes
    function changeAttribute() {
      const currentColor = targetNode.style.backgroundColor;
      targetNode.style.backgroundColor = currentColor === 'lightgray' ? 'lightblue' : 'lightgray';
    }
  </script>
</body>
</html>

Try it Yourself »

Este ejemplo muestra cómo usar un observador de mutaciones para detectar y responder a cambios en el Modelo de Objetos del Documento (DOM) de una página web. Esto es lo que hace cada parte del JavaScript y lo que puedes esperar ver cuando interactúes con el ejemplo:

Configurar el observador de mutaciones:
- Nodo objetivo: Es el elemento del DOM que quieres vigilar. En este caso, es el div con ID target.
- Configuraciones: Especifican qué tipos de cambios quieres supervisar:
  - attributes: El observador buscará cambios en los atributos (como style o class).
  - childList: Comprobará la adición o eliminación de elementos secundarios (como nuevos div añadidos).
  - subtree: Esto asegura que el observador compruebe no solo el elemento objetivo, sino también sus descendientes. Ten en cuenta que subtree solo surte efecto si childList o attributes también está habilitado.
  - attributeOldValue: Registra el valor anterior de cualquier atributo que se modifique (útil para seguir cambios).
Definir una función de callback:
- Esta función se ejecuta cada vez que el observador detecta un cambio según las configuraciones establecidas.
- Recorre todas las mutaciones detectadas y crea un mensaje de registro para cada una:
  - Si se añade o elimina un elemento secundario, registra "A child node has been added or removed." en texto verde.
  - Si se cambia un atributo (como el color de fondo), registra "The mutation.attributeName attribute was modified." en texto azul.
Instancia del observador:
- El observador de mutaciones se crea y se vincula a la función de callback.
Iniciar la observación:
- El observador comienza a supervisar el div target para cualquier cambio especificado en las configuraciones.
Funciones interactivas:
- Añadir nuevo elemento: Activada al hacer clic en un botón, esta función añade un nuevo div con el texto "New element added!" dentro del div target.
- Cambiar atributo: También activada por el mismo clic del botón, esta función alterna el color de fondo del div target entre 'lightgray' y 'lightblue'. Nota: aunque onclick en línea funciona para este ejemplo, se recomienda usar addEventListener para una separación más limpia del código en producción.

Resultados esperados:

Añadir un nuevo elemento:
- Cada vez que haces clic en el botón, se añade un nuevo div. Esto activa la comprobación childList del observador, y verás un mensaje verde que dice "A child node has been added or removed."
Cambiar un atributo:
- El mismo clic del botón cambiará el color de fondo del div target. Esto activa la comprobación de atributos del observador. Verás un mensaje azul que indica qué atributo cambió ("The style attribute was modified.").

Este ejemplo demuestra de forma eficaz cómo los observadores de mutaciones pueden usarse para supervisar y registrar cambios en el DOM, proporcionando información en tiempo real sobre lo que ocurre dentro de la página web.

Conclusión

Los observadores de mutaciones son una parte fundamental del conjunto de herramientas de JavaScript, ya que ofrecen soluciones dinámicas para gestionar los cambios del DOM de forma eficiente. Permiten a los desarrolladores crear aplicaciones web receptivas e interactivas que responden sin problemas a las interacciones del usuario y a las modificaciones programáticas del DOM. Aunque son potentes, es esencial usar los observadores de mutaciones con criterio para mantener un rendimiento y una experiencia de usuario óptimos. Al seleccionar cuidadosamente qué mutaciones observar, minimizar la sobrecarga en las funciones de callback de mutación y llamar a observer.disconnect() cuando el observador ya no sea necesario para evitar fugas de memoria, los desarrolladores pueden aprovechar los observadores de mutaciones para mejorar la funcionalidad del sitio sin comprometer la eficiencia. Comprender y aplicar estos principios permite crear interfaces web avanzadas y fáciles de usar que destacan en el panorama digital moderno.

Práctica

Which of the following statements are true regarding the JavaScript Mutation Observer?

Mutation Observers can be used to detect changes in the DOM, such as additions or removals of elements.Mutation Observers automatically prevent default actions for all DOM changes they detect.You can specify which types of mutations should be reported to the observer, such as attributes, childList, or subtree modifications.Mutation Observers provide a synchronous callback to handle the DOM changes.Using Mutation Observers heavily can impact the performance of a web application if not managed carefully.

API MutationObserver de JavaScript ​

Ejemplo de observador de mutaciones ​

Resultados esperados: ​

Conclusión ​

Práctica ​

API MutationObserver de JavaScript

Ejemplo de observador de mutaciones

Resultados esperados:

Conclusión

Práctica