From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/mutationobserver/index.html | 176 +++++++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 files/ru/web/api/mutationobserver/index.html (limited to 'files/ru/web/api/mutationobserver/index.html') diff --git a/files/ru/web/api/mutationobserver/index.html b/files/ru/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..61a16f69f0 --- /dev/null +++ b/files/ru/web/api/mutationobserver/index.html @@ -0,0 +1,176 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - API + - Advanced + - DOM + - DOM Reference + - NeedsContent + - NeedsUpdate + - Reference +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

MutationObserver предоставляет возможность получать уведомления об изменении определённых DOM-элементов. MutationObserver является заменой Mutation Events, определённой в спецификации DOM3 Events.

+ +

Конструктор

+ +
+
{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
+
Создает и возвращает новый MutationObserver, который вызовет определенную функцию обратного вызова при изменении в DOM.
+
+ +

Параметры

+ +
+
callback
+
Вызывается при каждом изменении DOM-элемента. Обзёрвер вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов MutationRecord, вторым аргументом является экземпляр MutationObserver.
+
+ +

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

+ +
+
{{domxref("MutationObserver.disconnect", "disconnect()")}}
+
Прекращает получение уведомлений об изменении DOM-элемента экземпляром MutationObserver, до того момента пока не будет вызван метод observe().
+
{{domxref("MutationObserver.observe", "observe()")}}
+
Подписывает экземпляр MutationObserver на получение уведомлений о манипуляциях с DOM-элементом.
+
{{domxref("MutationObserver.takeRecords", "takeRecords()")}}
+
Возвращает текущий {{jsxref("Array")}} очереди экземпляра MutationObserver, затем очищает её.
+
+ +

MutationObserverInit

+ +

MutationObserverInit — объект, который может содержать следующие свойства:

+ +
Примечание: Так или иначе необходимо установить true для одного из следующих cвойств: childList, attributes, characterData. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
childList +

true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes))

+
attributes +

true, если необходимо наблюдать за изменениями атрибутов целевого элемента.

+
characterData +

true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента).

+
subtree +

true, если необходимо наблюдать за потомками целевого элемента. 

+
attributeOldValue +

true, если необходимо возвращать предыдущее значение атрибута. 

+
characterDataOldValue +

true, если необходимо возвращать предыдущее значение Data атрибута. 

+
attributeFilter +

Устанавливает массив названий атрибутов (без указания пространства имен), если требуется наблюдать за изменениями конкретных атрибутов. 

+
+ +

Mutation Observer & customize resize event listener & demo

+ +

https://codepen.io/webgeeker/full/YjrZgg/

+ +

Пример использования

+ +

Приведённый ниже пример взят из этого блога.

+ +
// Выбираем целевой элемент
+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();
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM4') }}
+ +

Поддержка браузерами

+ +

{{Compat("api.MutationObserver")}}

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf