1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: MutationObserver
slug: Web/API/MutationObserver
tags:
- API
- Advanced
- DOM
- DOM Reference
- NeedsContent
- NeedsUpdate
- Reference
translation_of: Web/API/MutationObserver
---
<p>{{APIRef("DOM")}}</p>
<p><code>MutationObserver</code> предоставляет возможность получать уведомления об изменении определённых <a href="/en-US/docs/DOM">DOM</a>-элементов. <code>MutationObserver</code> является заменой <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a>, определённой в спецификации DOM3 Events.</p>
<h2 id="Конструктор">Конструктор</h2>
<dl>
<dt>{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}</dt>
<dd>Создаёт и возвращает новый <code>MutationObserver</code>, который вызовет определённую колбэк-функцию при изменении в DOM.</dd>
</dl>
<h2 id="Параметры">Параметры</h2>
<dl>
<dt><code>callback</code></dt>
<dd>Вызывается при каждом изменении DOM-элемента. Наблюдатель вызывает данную функцию с двумя аргументами. Первым аргументом является массив объектов <a href="/en-US/docs/Web/API/MutationRecord">MutationRecord</a>, вторым аргументом является экземпляр <code>MutationObserver.</code></dd>
</dl>
<h2 id="Методы_экземпляра">Методы экземпляра</h2>
<dl>
<dt>{{domxref("MutationObserver.disconnect", "disconnect()")}}</dt>
<dd>Прекращает получение уведомлений об изменении DOM-элемента экземпляром <code>MutationObserver</code>, до того момента пока не будет вызван метод <a href="#observe()">observe()</a>.</dd>
<dt>{{domxref("MutationObserver.observe", "observe()")}}</dt>
<dd>Подписывает экземпляр <code>MutationObserver</code> на получение уведомлений о манипуляциях с DOM-элементом.</dd>
<dt>{{domxref("MutationObserver.takeRecords", "takeRecords()")}}</dt>
<dd>Возвращает текущий {{jsxref("Array")}} очереди экземпляра <code>MutationObserver</code>, затем очищает её.</dd>
</dl>
<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
<p><code>MutationObserverInit</code> — объект, который может содержать следующие свойства:</p>
<div class="note"><strong>Примечание:</strong> Так или иначе необходимо установить <code>true</code> для одного из следующих свойств: <code>childList</code>, <code>attributes</code>, <code>characterData</code>. В противном случае будет вызвана ошибка "An invalid or illegal string was specified"</div>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Property</td>
<td class="header">Description</td>
</tr>
<tr>
<td><code>childList</code></td>
<td>
<p>true, если необходимо наблюдать за добавлением или удалением дочерних элементов (Включая текстовые узлы (text nodes))</p>
</td>
</tr>
<tr>
<td><code>attributes</code></td>
<td>
<p>true, если необходимо наблюдать за изменениями атрибутов целевого элемента.</p>
</td>
</tr>
<tr>
<td><code>characterData</code></td>
<td>
<p>true, если необходимо наблюдать за изменениями значения текстового содержимого целевого узла (текстовых узлов дочернего элемента).</p>
</td>
</tr>
<tr>
<td><code>subtree</code></td>
<td>
<p>true, если необходимо наблюдать за потомками целевого элемента. </p>
</td>
</tr>
<tr>
<td><code>attributeOldValue</code></td>
<td>
<p>true, если необходимо возвращать предыдущее значение атрибута. </p>
</td>
</tr>
<tr>
<td><code>characterDataOldValue</code></td>
<td>
<p>true, если необходимо возвращать предыдущее значение Data атрибута. </p>
</td>
</tr>
<tr>
<td><code>attributeFilter</code></td>
<td>
<p>Устанавливает массив названий атрибутов (без указания пространства имён), если требуется наблюдать за изменениями конкретных атрибутов. </p>
</td>
</tr>
</tbody>
</table>
<h2 id="Mutation_Observer_customize_resize_event_listener_demo">Mutation Observer & customize resize event listener & demo</h2>
<p><a href="https://codepen.io/webgeeker/full/YjrZgg/">https://codepen.io/webgeeker/full/YjrZgg/</a></p>
<h2 id="Пример_использования">Пример использования</h2>
<p>Приведённый ниже пример взят из <a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">этого блога</a>.</p>
<pre class="brush: js">// Выбираем целевой элемент
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.');
}
}
};
// Создаём<code> </code>экземпляр наблюдателя с указанной функцией колбэка
const observer = new MutationObserver(callback);
// Начинаем наблюдение за настроенными изменениями целевого элемента<code>
observer.observe(target, config);
</code>// Позже можно остановить наблюдение<code>
observer.disconnect();</code>
</pre>
<h2 id="Specifications">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("api.MutationObserver")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{domxref('PerformanceObserver')}}</li>
<li>{{domxref('ResizeObserver')}}</li>
<li>{{domxref('IntersectionObserver')}}</li>
<li><a href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Краткий обзор</a></li>
<li><a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">Более детальное обсуждение</a></li>
<li><a href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Скринкаст от разработчика Chromium Rafael Weinstein</a></li>
</ul>
|
