diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/api/mutationobserver/observe | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-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.html | 95 |
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> |