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
|
---
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>
|
