path: root/files/es/web/api/mutationobserver/index.html

---
title: MutationObserver
slug: Web/API/MutationObserver
translation_of: Web/API/MutationObserver
---
<p>{{APIRef("DOM")}}</p>

<p><code>MutationObserver</code> establece un mecanismo para reaccionar ante cambios en el <a href="/en-US/docs/DOM">DOM</a>. Ha sido diseñado como un sustituto de los <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> definidos en las especificaciones de <em>DOM3 Events</em>.</p>

<h2 id="Constructor" name="Constructor">Constructor</h2>

<h3 id="MutationObserver()" name="MutationObserver()"><code>MutationObserver()</code></h3>

<p>Constructor para la instaciación de nuevos <em>DOM mutation observers</em>.</p>

<pre class="eval">MutationObserver(
  function callback
);
</pre>

<h6 id="Parameters" name="Parameters">Parámetros</h6>

<dl>
 <dt><code>callback</code></dt>
 <dd>La función que será llamada en cada mutación del DOM. El <em>observer</em> llamará a esta función con dos argumentos. El primero es un array de objetos, cada uno del tipo <a href="#MutationRecord"><code>MutationRecord</code></a>. El segundo es la propia instancia del <code>MutationObserver</code>.</dd>
</dl>

<h2 id="Instance_methods" name="Instance_methods">Métodos</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 la instancia del <code>MutationObserver</code>  para recibir notificaciones de las mutaciones del DOM sobre el nodo especificado.</p>

<pre class="eval">void observe(
  {{domxref("Node")}} target,
  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
);
</pre>

<h6 id="Parameters" name="Parameters">Parámetros</h6>

<dl>
 <dt><code>target</code></dt>
 <dd>El {{domxref("Node")}} sobre el que observar las mutaciones del DOM.</dd>
 <dt><code>options</code></dt>
 <dd><code>Un objeto <a href="#MutationObserverInit">MutationObserverInit</a></code>, que especifica que mutaciones del DOM deben ser informadas.</dd>
</dl>

<div class="note">NOTA: Añadir un observador a un elemento es igual que addEventListener, si usted observa el elemento múltiples veces no hace ninguna diferencia. Si se observa dos veces un elemento, el observe callback no se ejecutará dos veces, ni tampoco tendrá que ejecutar disconnect() dos veces. En otras palabras, una vez el elemento es observado, observarlo de nuevo con la misma instancia del observador no hará nada. Sin embargo, si el callback es diferente por supuesto se le añadirá otro observador.</div>

<h3 id="disconnect()" name="disconnect()"><code>disconnect()</code></h3>

<p>Evita que la instancia <code>de MutationObserver</code> continue recibiendo notificaciones de modificaciones del DOM. Hasta que el método <a href="#observe()"><code>observe()</code></a> sea usado de nuevo, la función callback no será invocada.</p>

<pre class="eval">void disconnect();
</pre>

<h3 id="takeRecords()" name="takeRecords()"><code>takeRecords()</code></h3>

<p>Vacía la cola de registros de la instancia de <code>MutationObserver</code> devolviendo su contenido.</p>

<pre class="eval">Array takeRecords();
</pre>

<h6 id="Return_value" name="Return_value">Return value</h6>

<p>Returns an Array of <a href="#MutationRecord"><code>MutationRecord</code>s</a>.</p>

<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>

<p><code>MutationObserverInit</code> es un objeto para el que se pueden especificar las siguientes propiedades:</p>

<div class="note">NOTA: Como mínimo las propiedades <code>childList</code>, <code>attributes</code>, o <code>characterData </code>deben ser <code>true</code>. En caso contrario, se producirá un error "An invalid or illegal string was specified"</div>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Propiedad</td>
   <td class="header">Descripción</td>
  </tr>
  <tr>
   <td><code>childList</code></td>
   <td>
    <p>Establecer a <code>true</code> si la adición y/o eliminación de elementos hijo del nodo (incluso los nodos <code>text</code>) han se ser observados.</p>
   </td>
  </tr>
  <tr>
   <td><code>attributes</code></td>
   <td>
    <p>Establecer a <code>true</code> si los cambios en los atributos deben ser observados</p>
   </td>
  </tr>
  <tr>
   <td><code>characterData</code></td>
   <td>
    <p>Establecer a <code>true</code> si los cambios en los datos deben ser observados</p>
   </td>
  </tr>
  <tr>
   <td><code>subtree</code></td>
   <td>
    <p>Establecer a <code>true</code> si los cambios tambien deben ser observados en los descendientes.</p>
   </td>
  </tr>
  <tr>
   <td><code>attributeOldValue</code></td>
   <td>
    <p>Establecer a <code>true</code> si <code>attributes</code> es <code>true</code> y el valor anterior al cambio debe ser guardado.</p>
   </td>
  </tr>
  <tr>
   <td><code>characterDataOldValue</code></td>
   <td>
    <p>Establecer a <code>true</code> si <code>characterData</code> vale <code>true</code> y el dato anterior al cambio de be ser guardado.</p>
   </td>
  </tr>
  <tr>
   <td><code>attributeFilter</code></td>
   <td>
    <p>Asigne un array de nombres de atributos locales (sin su espacio de nombres) si no necesita observar los cambios en todos los atributos</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="MutationRecord" name="MutationRecord"><code>MutationRecord</code></h2>

<p><code>MutationRecord</code> es el objeto que será pasado a la funcion "callback" del observador. Tiene las siguientes propiedades:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Propiedad</td>
   <td class="header">Tipo</td>
   <td class="header">Descripción</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td><code>String</code></td>
   <td>
    <p>Devuelve:</p>

    <ul>
     <li><code>attributes </code>si el cambio fué en un atributo</li>
     <li><code>characterData</code> si se produjo en un nodo.</li>
     <li><code>childList</code> si se produjo en los nodos del árbol.</li>
    </ul>

    <dl>
    </dl>
   </td>
  </tr>
  <tr>
   <td><code>target</code></td>
   <td><code>{{domxref("Node")}}</code></td>
   <td>
    <p>Devuelve el<strong> nodo</strong> afectado por el cambio, dependiendo del <code>type</code>:</p>

    <ul>
     <li>Para <code>attributes</code>, el elemento cuyos atributos han cambiado.</li>
     <li>Para <code>characterData</code>, el nodo <code>CharacterData</code>.</li>
     <li>Para <code>childList</code>, El nodo padre cuyos hijos han cambiado.</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code>addedNodes</code></td>
   <td><code>{{domxref("NodeList")}}</code></td>
   <td>
    <p>Devuelve los nodos añadidos. Si no tiene nodos añadidos devuelve un <span style="font-family: courier new,andale mono,monospace;">NodeList</span> vacio.</p>
   </td>
  </tr>
  <tr>
   <td><code>removedNodes</code></td>
   <td><code>{{domxref("NodeList")}}</code></td>
   <td>
    <p>Devuelve los nodos eliminados. Si no tiene nodos eliminados devuelve un <span style="font-family: courier new,andale mono,monospace;">NodeList</span> vacio.</p>
   </td>
  </tr>
  <tr>
   <td><code>previousSibling</code></td>
   <td><code>{{domxref("Node")}}</code></td>
   <td>
    <p>Devuelve el nodo hermano <strong>anterior</strong> añadido o eliminado, o el valor <code>null</code>.</p>
   </td>
  </tr>
  <tr>
   <td><code>nextSibling</code></td>
   <td><code>{{domxref("Node")}}</code></td>
   <td>
    <p>Devuelve el <strong>siguiente</strong> nodo hermano añadido o eliminado, o el valor <code>null</code>.</p>
   </td>
  </tr>
  <tr>
   <td><code>attributeName</code></td>
   <td><code>String</code></td>
   <td>
    <p>Devuelve el nombre local del atributo cambiado, o el valor <code>null</code>.</p>
   </td>
  </tr>
  <tr>
   <td><code>attributeNamespace</code></td>
   <td><code>String</code></td>
   <td>
    <p>Devuelve espacio de nombres (namespace) del atributo cambiado, o el valor <code>null</code>.</p>
   </td>
  </tr>
  <tr>
   <td><code>oldValue</code></td>
   <td><code>String</code></td>
   <td>
    <p>El valor devuelto depende del <code>type</code>:</p>

    <ul>
     <li>Para <code>attributes</code>,el valor anterior del atributo.</li>
     <li>Para <code>characterData</code>,los datos antes del cambio</li>
     <li>Para <code>childList</code>,devuelve <code>null</code>.</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Example_usage" name="Example_usage">Ejemplo de uso</h2>

<p>El siguiente ejemplo fué tomado de: <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">this blog post</a>.</p>

<pre class="brush: js">// selecciona el nodo target
var target = document.querySelector('#some-id');

// Crea una instancia de observer
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

// Configura el observer:
var config = { attributes: true, childList: true, characterData: true };

// pasa al observer el nodo y la configuracion
observer.observe(target, config);

// Posteriormente, puede detener la observacion
observer.disconnect();
</pre>

<h2 id="Additional_reading" name="Additional_reading">Lectura 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> which defines the <code>MutationObserver</code> interface</li>
</ul>

<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>18 {{ property_prefix("-webkit") }}<br>
    26</td>
   <td>{{ CompatGeckoDesktop(14) }}</td>
   <td>11</td>
   <td>15</td>
   <td>6.0 {{ property_prefix("-webkit") }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE  (Windows Phone) </th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>18 {{ property_prefix("-webkit") }}<br>
    26</td>
   <td>{{ CompatGeckoMobile(14) }}</td>
   <td><span style="font-size: 12px; line-height: 18px;">11 (8.1)</span></td>
   <td>15</td>
   <td>
    <p>6 {{ property_prefix("-webkit")}}</p>

    <p>7</p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>