Наблюдение за изменениями DOM.

  Технология наблюдения за изменениями DOM позволяет подключать некий наблюдатель, за изменениями любого узла DOM, которые могут появляться вследствие работы скриптов.
  Наблюдатель асинхронно зафиксирует все такие изменения и вызовет заданную функцию, которой передаст зафиксированные результаты наблюдения.

  В отличие от обработчиков событий, наблюдатели за изменениями только фиксируют изменения.
  Функция обратного вызова запускается наблюдателями изменений только после того, как будут обработаны все отслеживаемые события, поэтому выполнение кода этой функции не должно приводить к возникновению событий, для которых заданы обработчики в этом документе.
  MutationObserver
  MutationObserver - Является интерфейсом к наблюдателю изменений DOM.
  Экземпляр доступен:

  1. В выражении

    new MutationObserver(Функция)

    где:
  MutationObserver методы.
  disconnect - Отключает наблюдатель изменений DOM.
  Возвращает значение undefined.
  Наблюдатель может быть снова подключён методом observe.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserver.disconnect()

Значения формата записи:

  observe - Подключает наблюдатель изменений DOM к заданному узлу.
  Возвращает значение undefined.
  К одному узлу DOM может быть подключён только один наблюдатель.
  Наблюдатель может быть отключён методом disconnect.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserver.observe(Узел, Опции)

Значения формата записи:

  takeRecords - Удаляет все элементы из массива экземпляров объекта MutationRecord, который создал наблюдатель изменений DOM.
  Возвращает ссылку на этот массив.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserver.takeRecords()

Значения формата записи:

  MutationRecord
  MutationRecord - Является интерфейсом к записи, созданной наблюдателем изменений DOM.
  Экземпляр доступен:

  1. В любом элементе массива, переданного браузером в первом аргументе функции обратного вызова заданной при создании соответствующего экземпляра объекта MutationObserver.
  MutationRecord свойства.
  addedNodes - Содержит список узлов добавленных в DOM в период наблюдения соответствующего узла.
  Отслеживаются только "дочерние" узлы для наблюдаемого.
  Это статический список.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationRecord.addedNodes

Значения формата записи:

  attributeName - Содержит имя атрибута тега, значение которого было изменено в период наблюдения соответствующего узла.
  Значение имеет строковый формат.
  Если, при подключении к этому узлу была задана опция attributeFilter, то фиксироваться будет только изменения отфильтрованных атрибутов.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationRecord.attributeName

Значения формата записи:

  nextSibling - Содержит узел, который по HTML-коду следует в DOM непосредственно после узла с подключенным наблюдателем, и на том же уровне.
  Может содержать значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationRecord.nextSibling

Значения формата записи:

  oldValue - Содержит старое значение атрибута, или контента, которое было изменено в период наблюдения соответствующего узла.
  Значение имеет строковый формат или null.
  Значение свойства oldValue зависит от опций attributes, characterData, attributeOldValue, characterDataOldValue.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationRecord.oldValue

Значения формата записи:

  previousSibling - Содержит узел, который по HTML-коду следует в DOM непосредственно перед узлом с подключенным наблюдателем, и на том же уровне.
  Может содержать значение null.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationRecord.previousSibling

Значения формата записи:

  removedNodes - Содержит список узлов удалённых из DOM в период наблюдения соответствующего узла.
  Отслеживаются только "дочерние" узлы для наблюдаемого.
  Это статический список.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationRecord.removedNodes

Значения формата записи:

  target - Содержит ссылку на экземпляр объекта Node - узла, к которому подключен соответствующий наблюдатель.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationRecord.target

Значения формата записи:

  type - Содержит тип изменения зафиксированного в записи, указанной экземпляром объекта MutationRecord.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationRecord.type

Значения формата записи:

  MutationObserverInit
  MutationObserverInit - Является интерфейсом к опциям наблюдателя изменения DOM.
  Экземпляр доступен:

  1. У объекта MutationObserverInit нет конструктора. Его экземпляры можно создавать непосредственной записью в коде скрипта.
  MutationObserverInit свойства.
  attributeFilter - Содержит список атрибутов, которые нужно отслеживать в период наблюдения за соответствующим узлом.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserverInit.attributeFilter[ = Значение]

Значения формата записи:

  • Экземпляр объекта MutationObserverInit - Любой операнд значения со значением экземпляра объекта MutationObserverInit.
  • . - Оператор доступа к свойству объекта.
  • attributeFilter - Ключевое слово.
  • = - Оператор присвоения. Ключевое слово в этом формате.
  • Значение - Заключенный в квадратные скобки список атрибутов перечисленных через запятую, заданный в любом строковом формате.
      Например - ["STYLE","CLASS"].
      Если значение не задано, а свойство attributes установлено в true, то изменения будут отслеживаться во всех атрибутах.
  attributes - Содержит логическое значение, которое указывает отслеживать или нет изменения в атрибутах, в период наблюдения за соответствующим узлом.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserverInit.attributes[ = true|false]

Значения формата записи:

  attributeOldValue - Содержит логическое значение, которое указывает сохранять или нет старое значение изменённых атрибутов, в период наблюдения за соответствующим узлом.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserverInit.attributeOldValue[ = true|false]

Значения формата записи:

  characterData - Содержит логическое значение, которое указывает отслеживать или нет изменения в контенте, в период наблюдения за соответствующим узлом.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserverInit.characterData[ = true|false]

Значения формата записи:

  characterDataOldValue - Содержит логическое значение, которое указывает сохранять или нет старое значение изменённого контента, в период наблюдения за соответствующим узлом.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserverInit.characterDataOldValue[ = true|false]

Значения формата записи:

  childList - Содержит логическое значение, которое указывает отслеживать или нет изменение "дочерней" DOM структуры, в период наблюдения за соответствующим узлом.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserverInit.childList[ = true|false]

Значения формата записи:

  subtree - Содержит логическое значение, которое указывает отслеживать или нет изменения в "дочерних" узлах, в период наблюдения за соответствующим узлом.

Формат записи в коде скрипта:

  • Экземпляр объекта MutationObserverInit.subtree[ = true|false]

Значения формата записи:

Сводная таблица методов
Имя метода Объект Функционал Возвращаемое значение
disconnect MutationObserver Отключает наблюдатель. undefined
observe MutationObserver Подключает наблюдатель. undefined
takeRecords MutationObserver Очищает массив записей наблюдения. массив

Сводная таблица свойств
Имя свойства Объект Содержание Тип значения
addedNodes MutationRecord Список узлов добавленных в DOM в период наблюдения. Экземпляр объекта
attributeFilter MutationObserverInit Список атрибутов, которые нужно отслеживать в период наблюдения. Строковый формат
attributeName MutationRecord Имя атрибута тега, значение которого было изменено в период наблюдения. Строковый формат
attributes MutationObserverInit Флаг фиксации изменений в атрибутах. Логический формат
attributeOldValue MutationObserverInit Флаг фиксации старого значения атрибутов. Логический формат
characterData MutationObserverInit Флаг фиксации изменений в контенте. Логический формат
characterDataOldValue MutationObserverInit Флаг фиксации старого значения контента. Логический формат
childList MutationObserverInit Флаг фиксации изменения "дочерней" DOM структуры. Логический формат
nextSibling MutationRecord Узел, который следует в DOM непосредственно после узла с подключенным наблюдателем, и на том же уровне. Экземпляр объекта
oldValue MutationRecord Старое значение атрибута, или контента. Строковый формат
previousSibling MutationRecord узел, который следует в DOM непосредственно перед узлом с подключенным наблюдателем, и на том же уровне. Экземпляр объекта
removedNodes MutationRecord Список узлов удалённых из DOM в период наблюдения. Экземпляр объекта
subtree MutationObserverInit Флаг фиксации изменений в "дочерних" узлах. Логический формат
target MutationRecord Узел, к которому подключен наблюдатель. Экземпляр объекта
type MutationRecord Тип изменения зафиксированного в записи наблюдения. Строковый формат