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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
---
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> для одного из следующих cвойств: <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" name="Specifications">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
<td>{{ Spec2('DOM WHATWG') }}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td>
<td>{{ Spec2('DOM4') }}</td>
<td></td>
</tr>
</tbody>
</table>
<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>
|
