API MutationObserver в JavaScript

Наблюдатели за изменениями (Mutation Observers) в JavaScript позволяют отслеживать изменения в DOM и реагировать на них динамически. Это интерактивное руководство предлагает простой практический подход к пониманию работы Mutation Observers, с примерами, наглядно демонстрирующими изменения.

Пример работы Mutation Observer

Вот базовый пример, который поможет вам увидеть, как работает Mutation Observer, визуально отображая изменения в 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 »

Этот пример демонстрирует, как использовать Mutation Observer для обнаружения и реакции на изменения в Document Object Model (DOM) веб-страницы. Ниже описано, что делает каждая часть JavaScript-кода и чего ожидать при взаимодействии с примером:

Настройка Mutation Observer:
- Целевой узел (Target Node): Это элемент DOM, который вы хотите отслеживать. В данном случае это div с идентификатором target.
- Конфигурация: Указывает типы изменений, которые нужно отслеживать:
  - attributes: Наблюдатель будет искать изменения атрибутов (например, style или class).
  - childList: Он будет проверять добавление или удаление дочерних элементов (например, добавление новых div).
  - subtree: Это гарантирует, что наблюдатель проверяет не только целевой элемент, но и его потомков. Обратите внимание, что subtree действует только в том случае, если также включены childList или attributes.
  - attributeOldValue: Записывает предыдущее значение любого измененного атрибута (полезно для отслеживания изменений).
Определение функции обратного вызова (Callback):
- Эта функция выполняется каждый раз, когда наблюдатель обнаруживает изменение в соответствии с заданной конфигурацией.
- Она перебирает все обнаруженные мутации и создает сообщение журнала для каждой из них:
  - Если дочерний элемент добавлен или удален, в журнал выводится сообщение «A child node has been added or removed.» зеленым текстом.
  - Если изменен атрибут (например, цвет фона), в журнал выводится сообщение «The mutation.attributeName attribute was modified.» синим текстом.
Создание экземпляра наблюдателя:
- Mutation Observer создается и связывается с функцией обратного вызова.
Запуск наблюдения:
- Наблюдатель начинает отслеживать div с идентификатором target на наличие любых изменений, указанных в конфигурации.
Интерактивные функции:
- Добавление нового элемента: Вызывается при нажатии кнопки, эта функция добавляет новый div с текстом «New element added!» внутрь target div.
- Изменение атрибута: Также вызывается при нажатии той же кнопки, эта функция переключает цвет фона target div между 'lightgray' и 'lightblue'. Примечание: Хотя встроенный onclick работает для этого примера, для более чистого разделения кода в продакшене рекомендуется использовать addEventListener.

Ожидаемые результаты:

Добавление нового элемента:
- Каждый раз при нажатии кнопки добавляется новый div. Это запускает проверку childList у наблюдателя, и вы увидите зеленое сообщение «A child node has been added or removed.»
Изменение атрибута:
- То же нажатие кнопки изменит цвет фона target div. Это запускает проверку атрибутов у наблюдателя. Вы увидите синее сообщение, указывающее, какой атрибут был изменен («The style attribute was modified.»).

Этот пример наглядно демонстрирует, как Mutation Observers могут использоваться для мониторинга и логирования изменений в DOM, предоставляя обратную связь в реальном времени о том, что происходит на веб-странице.

Заключение

Mutation Observers являются важной частью инструментария JavaScript, предлагая динамичные решения для эффективного управления изменениями в DOM. Они позволяют разработчикам создавать отзывчивые и интерактивные веб-приложения, которые бесшовно реагируют на действия пользователей и программные изменения DOM. Несмотря на их мощь, важно использовать Mutation Observers осмотрительно, чтобы поддерживать оптимальную производительность и пользовательский опыт. Тщательно выбирая, какие мутации отслеживать, минимизируя накладные расходы в функциях обратного вызова мутаций и вызывая observer.disconnect(), когда наблюдатель больше не нужен (чтобы предотвратить утечки памяти), разработчики могут использовать Mutation Observers для улучшения функциональности сайта без ущерба для эффективности. Понимание и применение этих принципов позволяет создавать продвинутые и удобные веб-интерфейсы, которые выделяются на фоне современных цифровых решений.

Практика

Какие из следующих утверждений верны относительно Mutation Observer в JavaScript?

Mutation Observer можно использовать для обнаружения изменений в DOM, таких как добавление или удаление элементов.Mutation Observer автоматически предотвращает действия по умолчанию для всех обнаруженных изменений DOM.Вы можете указать, какие типы мутаций должны сообщаться наблюдателю, например, изменения атрибутов, childList или subtree.Mutation Observer предоставляет синхронную функцию обратного вызова для обработки изменений DOM.Чрезмерное использование Mutation Observer может негативно сказаться на производительности веб-приложения, если им не управлять тщательно.

API MutationObserver в JavaScript ​

Пример работы Mutation Observer ​

Ожидаемые результаты: ​

Заключение ​

Практика ​

API MutationObserver в JavaScript

Пример работы Mutation Observer

Ожидаемые результаты:

Заключение

Практика