MutationObserver
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 Standard # interface-mutationobserver |
Совместимость с браузерами
BCD tables only load in the browser