MutationObserver
Базовая поддержка Широко доступна
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.
Интерфейс MutationObserver предоставляет возможность отслеживать изменения в дереве DOM. Он разработан как замена более старой функции «События изменений DOM», которая была частью спецификации DOM3 Events.
Конструктор
MutationObserver()-
Создаёт и возвращает новый
MutationObserver, который вызовет указанную функцию обратного вызова при изменении DOM.
Методы экземпляра
disconnect()-
Прекращает получение дальнейших уведомлений экземпляром
MutationObserver, до тех пор, пока снова не будет вызванobserve(). observe()-
Настраивает
MutationObserverдля начала получения уведомлений через свою функцию обратного вызова при изменении DOM, соответствующем заданным параметрам. takeRecords()-
Удаляет все ожидающие уведомления из очереди уведомлений
MutationObserverи возвращает их в новом массивеArrayобъектовMutationRecord.
Mutation Observer & настройка обработчика событий изменения размера & демонстрация
Пример
Следующий пример был адаптирован из этой статьи блога.
// Select the node that will be observed for mutations
const targetNode = document.getElementById("some-id");
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
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.`);
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
Спецификации
| Спецификация |
|---|
| DOM # interface-mutationobserver |
Совместимость с браузерами
| Рабочий стол | Мобильные устройства | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
MutationObserver |
2618 | 12 | 14 | 15 | 76 | 2618 | 14 | 14 | 76 | 1.51.0 | 4.4≤37 |
MutationObserver |
2618 | 12 | 14 | 15 | 76 | 2618 | 14 | 14 | 76 | 1.51.0 | 4.4≤37 |
disconnect |
18 | 12 | 14 | 15 | 6 | 18 | 14 | 14 | 6 | 1.0 | 4.4 |
observe |
18Перед Chrome 33,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Chrome выводит ошибку синтаксиса. |
12Перед Edge 79,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Edge выводит ошибку синтаксиса. |
14Перед Firefox 36,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Firefox выводит ошибку синтаксиса. |
15Перед Opera 20,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Opera выводит ошибку синтаксиса. |
6Перед Safari 10.1,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Safari выводит ошибку синтаксиса. |
18Перед Chrome Android 33,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Chrome Android выводит ошибку синтаксиса. |
14Перед Firefox for Android 36,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Firefox for Android выводит ошибку синтаксиса. |
14Перед Opera Android 20,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Opera Android выводит ошибку синтаксиса. |
6Перед Safari iOS 10.3,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Safari выводит ошибку синтаксиса. |
1.0Перед Samsung Internet 2.0,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, Samsung Internet выводит ошибку синтаксиса. |
4.4Перед WebView 4.4.3,attributes: true требуется при использовании attributeFilter или attributeOldValue. Если attributes: true отсутствует, WebView выводит ошибку синтаксиса. |
takeRecords |
20 | 12 | 14 | 15 | 6 | 25 | 14 | 14 | 6 | 1.5 | 4.4 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver