This page was translated from English by the community.Learn more and join the MDN Web Docs community.
MutationObserver
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
MutationObserver предоставляет возможность получать уведомления об изменении определённыхDOM-элементов.MutationObserver является заменойMutation Events, определённой в спецификации DOM3 Events.
Конструктор
MutationObserver()Создаёт и возвращает новый
MutationObserver, который вызовет определённую колбэк-функцию при изменении в DOM.
Параметры
callbackВызывается при каждом изменении DOM-элемента. Наблюдатель вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектовMutationRecord, вторым аргументом является экземпляр
MutationObserver.
Методы экземпляра
disconnect()Прекращает получение уведомлений об изменении DOM-элемента экземпляром
MutationObserver, до того момента пока не будет вызван методobserve().observe()Подписывает экземпляр
MutationObserverна получение уведомлений о манипуляциях с DOM-элементом.takeRecords()Возвращает текущий
Arrayочереди экземпляраMutationObserver, затем очищает её.
MutationObserverInit
MutationObserverInit — объект, который может содержать следующие свойства:
Примечание:Так или иначе необходимо установитьtrue для одного из следующих свойств:childList,attributes,characterData. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"
| Property | Description |
|---|---|
childList | true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes)) |
attributes | true, если необходимо наблюдать за изменениями атрибутов целевого элемента. |
characterData | true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента). |
subtree | true, если необходимо наблюдать за потомками целевого элемента. |
attributeOldValue | true, если необходимо возвращать предыдущее значение атрибута. |
characterDataOldValue | true, если необходимо возвращать предыдущее значение Data атрибута. |
attributeFilter | Устанавливает массив названий атрибутов (без указания пространства имён), если требуется наблюдать за изменениями конкретных атрибутов. |
Mutation Observer & customize resize event listener & demo
Пример использования
Приведённый ниже пример взят изэтого блога.
// Выбираем целевой элементvar target = document.getElementById("some-id");// Конфигурация observer (за какими изменениями наблюдать)const config = { attributes: true, childList: true, subtree: true,};// Колбэк-функция при срабатывании мутацииconst callback = function (mutationsList, observer) { for (let 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."); } }};// Создаём экземпляр наблюдателя с указанной функцией колбэкаconst observer = new MutationObserver(callback);// Начинаем наблюдение за настроенными изменениями целевого элементаobserver.observe(target, config);// Позже можно остановить наблюдениеobserver.disconnect();Спецификации
| Specification |
|---|
| DOM # interface-mutationobserver |