Эффективное обнаружение изменений DOM

Наблюдение за изменениями в DOM имеет решающее значение для создания динамических веб-приложений, реагирующих на взаимодействия с пользователем. Один из широко используемых подходов предполагает использование MutationObserver, современного API, который позволяет отслеживать изменения DOM. Этот подход поддерживается большинством современных браузеров, включая IE11 , Firefox и WebKit.

Чтобы реализовать это, вы можете использовать следующие шаги:

var observeDOM = (function() {
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

  return function(obj, callback) {
    if (!obj || obj.nodeType !== 1) {
      return;
    }

    if (MutationObserver) {
      var mutationObserver = new MutationObserver(callback);
      mutationObserver.observe(obj, {childList: true, subtree: true});
      return mutationObserver;
    } else if (window.addEventListener) { // browser support fallback
      obj.addEventListener('DOMNodeInserted', callback, false);
      obj.addEventListener('DOMNodeRemoved', callback, false);
    }
  }
})();

Эта функция принимает в качестве аргументов элемент (obj) и функцию обратного вызова (callback). Обратный вызов будет выполняться всякий раз, когда в элементе или его дочерних элементах вносятся изменения.

Чтобы продемонстрировать использование, рассмотрим следующий пример:

  
list item (click to delete)

В этом примере показано следующее:

• Добавление элемента в список
• Удаление элемента из списка
• Использование MutationObserver для обнаружения изменений в списке. Это можно использовать для выполнения различных действий, таких как изменение пользовательского интерфейса или обновление серверных данных.