MutationObserver
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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 Standard # interface-mutationobserver |
Совместимость с браузерами
BCD tables only load in the browser