Spec-Zone.ru › Web APIs

MutationObserver

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

  • Узнать больше
  • Полная совместимость
  • Отправить отзыв

Интерфейс MutationObserver предоставляет возможность отслеживать изменения в дереве DOM. Он разработан как замена более старой функции «События изменений DOM», которая была частью спецификации DOM3 Events.

Конструктор

MutationObserver()

Создаёт и возвращает новый MutationObserver, который вызовет указанную функцию обратного вызова при изменении DOM.

Методы экземпляра

disconnect()

Прекращает получение дальнейших уведомлений экземпляром MutationObserver, до тех пор, пока снова не будет вызван observe().

observe()

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

takeRecords()

Удаляет все ожидающие уведомления из очереди уведомлений MutationObserver и возвращает их в новом массиве Array объектов MutationRecord.

Mutation Observer & настройка обработчика событий изменения размера & демонстрация

https://codepen.io/milofultz/pen/LYjPXPw

Пример

Следующий пример был адаптирован из этой статьи блога.

// 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

См. также

  • PerformanceObserver
  • ResizeObserver
  • IntersectionObserver
  • Краткое описание
  • Более подробное обсуждение
  • Видеозапись от разработчика Chromium, Рафаэля Вайнштайна

© 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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API