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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
|
---
title: MutationObserver
slug: Web/API/MutationObserver
translation_of: Web/API/MutationObserver
---
<p>{{APIRef("DOM")}}</p>
<p><span style="font-family: consolas,monaco,andale mono,monospace;">MutationObserver</span> fornece aos desenvolvedores uma maneira de reagir a mudanças em um <a href="/en-US/docs/DOM">DOM</a>. Ele é concebido como um substituto para <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> definido na especificação de eventos DOM nível 3.</p>
<h2 id="Constructor" name="Constructor">Constructor</h2>
<h3 id="MutationObserver" name="MutationObserver()"><code>MutationObserver()</code></h3>
<p>Construtor para instanciar novos observadores de mutação do DOM.</p>
<pre class="eval notranslate">MutationObserver(
function callback
);
</pre>
<h6 id="Parameters" name="Parameters">Parâmetros</h6>
<dl>
<dt><code>callback</code></dt>
<dd>A função que será chamada em cada mutação do DOM. O observador irá chamar esta função com dois argumentos. O primeiro é um array de objetos, cada um do tipo <a href="#MutationRecord"><code>MutationRecord</code></a>. O segundo é a essa instância <span style="font-family: consolas,monaco,andale mono,monospace;">MutationObserver</span>.</dd>
</dl>
<h2 id="Instance_methods" name="Instance_methods">Métodos da instância</h2>
<table class="standard-table">
<tbody>
<tr>
<td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
</tr>
<tr>
<td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
</tr>
<tr>
<td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
</tr>
</tbody>
</table>
<h3 id="observe" name="observe()"><code>observe()</code></h3>
<p>Registra a instância <span style="font-family: consolas,monaco,andale mono,monospace;">MutationObserver</span> para receber notificações das mutações do DOM no nó especificado.</p>
<pre class="eval notranslate">void observe(
{{domxref("Node")}} target,
<a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
);
</pre>
<h6 id="Parameters" name="Parameters"><strong style="font-size: 9px; font-weight: bold; line-height: 14.0699996948242px;">Parâmetros</strong></h6>
<dl>
<dt><code>target</code></dt>
<dd>O {{domxref("Node")}} no qual é observadas as mutações do DOM.</dd>
<dt><code>options</code></dt>
<dd>Um objeto <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> especifica quais mutações DOM devem ser reportadas.</dd>
</dl>
<div class="note">NOTA: Adicionar um observador para um elemento é como utilizar o addEventListener, se você observar o elemento várias vezes não faz diferença. Ou seja, se você observar um elemento duas vezes, o callback do observador não disparará duas vezes, nem você deverá executar duas vezes o disconnect(). Em outras palavras, uma vez que um elemento é observado, observá-lo novamento com a mesma instância do observador não fará nada. No entanto, se o objeto callback for diferente, ele, é claro, adicionará outro observador para isso.</div>
<h3 id="disconnect" name="disconnect()"><code>disconnect()</code></h3>
<p>Pára o rebimento de notificações das mutações do DOM na instância <code>MutationObserver.</code> O callback do observador não será invocado até que método <a href="#observe()"><code>observe()</code></a> seja novamente utilizado.</p>
<pre class="eval notranslate">void disconnect();
</pre>
<h3 id="takeRecords" name="takeRecords()"><code>takeRecords()</code></h3>
<p>Esvazia a fila de registro da instância <code>MutationObserver</code> e retorna o que estava nela.</p>
<pre class="eval notranslate">Array takeRecords();
</pre>
<h6 id="Return_value" name="Return_value">Valor de retorno</h6>
<p>Retorna um Array de <a href="#MutationRecord"><code>MutationRecord</code>s</a>.</p>
<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>
<p><code>MutationObserverInit</code> é um objeto que pode especificar as seguintes propriedades:</p>
<div class="note">NOTA: No mínimo <code>childList</code>, <code>attributes</code>, ou <code>characterData</code> devem ser definidos como <code>true</code>. Caso contrário o erro "An invalid or illegal string was specified" é lançado.</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>Defina como <code style="font-style: normal;">true</code> se adições e remoções dos elementos filho do nó alvo (incluindo nós de texto) devem ser observadas.</td>
</tr>
<tr>
<td><code>attributes</code></td>
<td>Defina como <code>true</code> se mutações dos atributos do alvo devem ser observadas.</td>
</tr>
<tr>
<td><code>characterData</code></td>
<td>Defina como <code>true</code> se mutações dos dados do alvo devem ser observadas.</td>
</tr>
<tr>
<td><code>subtree</code></td>
<td>Defina como <code>true</code> se mutações não apenas do alvo, mas também dos descendentes do alvo devem ser observadas.</td>
</tr>
<tr>
<td><code>attributeOldValue</code></td>
<td>Defina como <code>true</code> se <code>attributes</code> é definido como <code>true</code> e o valor do atributo do alvo antes da mutação precisa ser gravado.</td>
</tr>
<tr>
<td><code>characterDataOldValue</code></td>
<td>Defina como <code>true</code> se <code>characterData</code> é definido como <code>true</code> e os dados do alvo antes da mutação precisam ser gravados.</td>
</tr>
<tr>
<td><code>attributeFilter</code></td>
<td>Defina como um array de nomes locais de atributo (sem namespace) se nem todas mutações de atributo precisam ser observadas.</td>
</tr>
</tbody>
</table>
<h2 id="MutationRecord" name="MutationRecord"><code>MutationRecord</code></h2>
<p><code>MutationRecord</code> é um objeto que será passado para o callback do observador. Tem as seguintes propriedades:</p>
<table class="standard-table">
<tbody>
<tr>
<td class="header">Property</td>
<td class="header">Type</td>
<td class="header">Description</td>
</tr>
<tr>
<td><code>type</code></td>
<td><code>String</code></td>
<td>Retorna <code>attributes</code> se a mutação foi a de um atributo, <code>characterData</code> se foi de um nó <code>CharacterData</code>, e <code>childList</code> se foi a mutação para uma árvore de nós.</td>
</tr>
<tr>
<td><code>target</code></td>
<td><code>{{domxref("Node")}}</code></td>
<td>Retorna o nó que a mutação afetou, dependendo do <code>type</code>. Para <code>attributes </code>é o elemento cujo atributo mudou. Para <code>characterData </code>é o nó <code>CharacterData</code>. Para <code>childList</code> é o nó cujos filhos mudaram.</td>
</tr>
<tr>
<td><code>addedNodes</code></td>
<td><code>{{domxref("NodeList")}}</code></td>
<td>Retorna os nós adicionados. Será uma <span style="font-family: courier new,andale mono,monospace;">NodeList</span> vazia se nenhum nó foi adicionado.</td>
</tr>
<tr>
<td><code>removedNodes</code></td>
<td><code>{{domxref("NodeList")}}</code></td>
<td>Retorna os nós removidos. Será uma <span style="font-family: courier new,andale mono,monospace;">NodeList</span> vazia se nenhum nó foi removido.</td>
</tr>
<tr>
<td><code>previousSibling</code></td>
<td><code>{{domxref("Node")}}</code></td>
<td>Retorna o irmão anterior dos nós adicionados ou removidos, ou <code>null</code>.</td>
</tr>
<tr>
<td><code>nextSibling</code></td>
<td><code>{{domxref("Node")}}</code></td>
<td>Retorna o próximo irmão dos nós adicionados ou removidos, ou <code>null</code>.</td>
</tr>
<tr>
<td><code>attributeName</code></td>
<td><code>String</code></td>
<td>Retorna o nome local do atributo modificado, ou <code>null</code>.</td>
</tr>
<tr>
<td><code>attributeNamespace</code></td>
<td><code>String</code></td>
<td>Retorna o namespace do atributo modificado, ou <code>null</code>.</td>
</tr>
<tr>
<td><code>oldValue</code></td>
<td><code>String</code></td>
<td>O valor retornado depende do <code>type</code>. Para <code>attributes</code>, é o valor do atributo modificado antes da troca. Para <code>characterData</code>, são os dados do nó modificado antes da troca. Para <code>childList </code>é <code>null</code>.</td>
</tr>
</tbody>
</table>
<h2 id="Example_usage" name="Example_usage">Exemplo de uso</h2>
<p>O exemplo a seguir foi retirado <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">deste post</a>.</p>
<pre class="brush: js notranslate">// seleciona o nó alvo
var target = document.querySelector('#some-id');
// cria uma nova instância de observador
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuração do observador:
var config = { attributes: true, childList: true, characterData: true };
// passar o nó alvo, bem como as opções de observação
observer.observe(target, config);
// mais tarde você pode parar de observar
observer.disconnect();
</pre>
<h2 id="Additional_reading" name="Additional_reading">Leitura adicional</h2>
<ul>
<li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
<li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
<li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
<li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
<li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> que define a interface do <code>MutationObserver</code></li>
</ul>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{Compat("api.MutationObserver")}}</p>
|
