1 files changed, 221 insertions, 0 deletions
diff --git a/files/pt-br/web/api/mutationobserver/index.html b/files/pt-br/web/api/mutationobserver/index.html
new file mode 100644
index 0000000000..2ca0d03404
--- /dev/null
+++ b/files/pt-br/web/api/mutationobserver/index.html
@@ -0,0 +1,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="Compatibilidade_de_browser">Compatibilidade de browser</h2>
+
+<p>{{Compat("api.MutationObserver")}}</p>