aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/api/mutationobserver/observe
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:41:45 -0500
commit1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch)
tree0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/api/mutationobserver/observe
parent4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff)
downloadtranslated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2
translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip
initial commit
Diffstat (limited to 'files/es/web/api/mutationobserver/observe')
-rw-r--r--files/es/web/api/mutationobserver/observe/index.html95
1 files changed, 95 insertions, 0 deletions
diff --git a/files/es/web/api/mutationobserver/observe/index.html b/files/es/web/api/mutationobserver/observe/index.html
new file mode 100644
index 0000000000..607af27cd0
--- /dev/null
+++ b/files/es/web/api/mutationobserver/observe/index.html
@@ -0,0 +1,95 @@
+---
+title: MutationObserver.observe()
+slug: Web/API/MutationObserver/observe
+translation_of: Web/API/MutationObserver/observe
+---
+<div>{{APIRef("DOM WHATWG")}}</div>
+
+<p><span class="seoSummary">El método {{domxref("MutationObserver")}} <code><strong>observe()</strong></code><strong> </strong>configura la funcion <code>MutationObserver</code> para que inicie la recepción de cambios en el DOM que coincidan con las opciones dadas.</span></p>
+
+<p>Según la configuración, el <em>observador </em>verá un solo {{domxref("Node")}} del árbol del DOM, o ese nodo y alguno o todos los nodos descendientes.</p>
+
+<p>Para detener al <code>MutationObserver</code> (de modo que la funcion no sea llamada), llame al método {{domxref("MutationObserver.disconnect()")}}.</p>
+
+<ul>
+</ul>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox"><em>mutationObserver</em>.observe(<em>target</em>[, <em>options</em>])
+</pre>
+
+<h3 id="Parámetros">Parámetros</h3>
+
+<dl>
+ <dt><code>target</code></dt>
+ <dd> Un {{domxref("Node")}} del DOM (que puede ser un {{domxref("Element")}}) perteneciente al  árbol DOM, o la raiz de un subárbol de nodos, donde observar cambios.</dd>
+ <dt><code>options</code> {{optional_inline}}</dt>
+ <dd>Un objeto {{domxref("MutationObserverInit")}} opcional, que decribe qué cambios en el DOM deben ser enviados a la función <code>callback </code>del observador.</dd>
+</dl>
+
+<h3 id="Valor_devuelto">Valor devuelto</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Excepciones">Excepciones</h3>
+
+<dl>
+ <dt><code>TypeError</code></dt>
+ <dd>llamado en cualquiera de las siguientes circunstancias</dd>
+ <dd>
+ <ul>
+ <li>Las opciones han sido configuradas de tal modo que no existe nada que monitorizar (por ejemplo, si {{domxref("MutationObserverInit.childList")}}, {{domxref("MutationObserverInit.attributes")}}, y {{domxref("MutationObserverInit.characterData")}} son <strong>false</strong>)</li>
+ <li>La opcion <code>attributes</code> es  <code>false</code> (indicando que los cambios en los atributos no son monitorizados) y <code>attributeOldValue</code> es <code>true</code> y/o <code>attributeFilter</code> está presente.</li>
+ <li>Las opciones {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} son <code>true </code>pero {{domxref("MutationObserverInit.characterData")}} es <code>false</code> (indicando que los cambios en los caracteres no se guardan).</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Notas_de_uso">Notas de uso</h2>
+
+<h3 id="Reutilizar_MutationObservers">Reutilizar MutationObservers</h3>
+
+<p>Puede llamar varias veces al método <code>observe()</code> del mismo objeto <code>MutationObserver</code>  para ver los cambios en diferentes partes del árbol del DOM y/o diferentes tipos de cambios. Sin embargo ha de tener en cuenta:</p>
+
+<ul>
+ <li>Si llama a <code>observe()</code> en un nodo que ya estaba siendo observado por el mísmo <code>MutationObserver</code>, todos los observadores serán automáticamente eliminados de todos los elementos observados antes de que el nuevo observador sea activado.</li>
+ <li>Si el mismo <code>MutationObserver</code> no estaba siendo usado sobre ese nodo, entonces los observadores existentes se quedarán solos y se agregará el nuevo.</li>
+</ul>
+
+<h3 id="La_observación_sigue_a_los_nodos_cuando_se_desconecta">La observación sigue a los nodos cuando se desconecta</h3>
+
+<p>Los observadores de cambios tienen como objetivo permitirle ver un conjunto de nodos a lo largo del tiempo, incluso si la conexion entre estos nodos desaparece. Si esta observando un subárbol de nodos, y una parte del subárbol es desconectado y llevado a otra parte del DOM, continuará viendo ese mismo segmento de nodos, recibiendo las mismas llamadas a la función que antes de ser desconectado.</p>
+
+<p>En otras palabras, hasta que se le haya notificado que los nodos se están separando de su subárbol monitoreado, recibirá notificaciones de los cambios en ese subárbol y sus nodos. Esto evita que pierda los cambios producidos despues de que la conexion se corte y antes de que tenga la oportunidad de especificar un nuevo monitoreo sobre los cambios en el nodo o subárbol movido.</p>
+
+<p>De manera que en teoria si mantiene la pista de los objetos {{domxref("MutationRecord")}} que describen los cambios, podrá "deshacer" los mismos, devolviendo el DOM a su estado inicial.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p> </p>
+
+<h2 id="Specifications" name="Specifications">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('DOM WHATWG', '#dom-mutationobserver-observe', 'MutationObserver.observe()')}}</td>
+ <td>{{ Spec2('DOM WHATWG') }}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad">Compatibilidad</h2>
+
+
+
+<p>{{Compat("api.MutationObserver.observe")}}</p>