diff options
Diffstat (limited to 'files/it/web/api/mutationobserver/index.html')
| -rw-r--r-- | files/it/web/api/mutationobserver/index.html | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/files/it/web/api/mutationobserver/index.html b/files/it/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..6c15916a56 --- /dev/null +++ b/files/it/web/api/mutationobserver/index.html @@ -0,0 +1,102 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - Cambiamenti del DOM + - DOM + - DOM Reference + - Mutation Observer + - Mutation Observer e resize + - resize + - resize listener +translation_of: Web/API/MutationObserver +--- +<div>{{APIRef("DOM WHATWG")}}</div> + +<p>L'interfaccia {{domxref("MutationObserver")}} offre la possibilità di monitorare le mutazioni subite dall'alberatura del <a href="/en-US/docs/DOM">DOM</a>. È stata progettata per sostituire i <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> che fanno parte del DOM3 Events specification.</p> + +<h2 id="Costruttore">Costruttore</h2> + +<dl> + <dt>{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}</dt> + <dd>Crea e restituisce un nuovo <code>MutationObserver</code> che invocherà una funzione di callback specificata alla mutazione del DOM.</dd> +</dl> + +<h2 id="Metodi">Metodi</h2> + +<dl> + <dt>{{domxref("MutationObserver.disconnect", "disconnect()")}}</dt> + <dd>Interrompe la ricezione da parte dell'istanza <code>MutationObserver</code> di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato {{domxref("MutationObserver.observe", "observe()")}}</dd> + <dt>{{domxref("MutationObserver.observe", "observe()")}}</dt> + <dd>Configura il <code>MutationObserver</code> affinché possa ricevere notifiche attraverso la funzione di callback specificata quando avviene una mutazione del DOM che corrisponda alle opzioni impostate.</dd> + <dt>{{domxref("MutationObserver.takeRecords", "takeRecords()")}}</dt> + <dd>Rimuove tutte le notifiche in coda sul <code>MutationObserver</code> e le restituisce come nuovo {{jsxref("Array")}} di oggetti {{domxref("MutationRecord")}}</dd> +</dl> + +<h2 id="Mutation_Observer_customizzazione_del_resize_event_demo">Mutation Observer & customizzazione del resize event & demo</h2> + +<p><a class="external" href="https://codepen.io/webgeeker/full/YjrZgg/">https://codepen.io/webgeeker/full/YjrZgg/</a></p> + +<h2 id="Esempio">Esempio</h2> + +<p>L'esempio seguente è un adattamento di questo <a href="https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/">post</a></p> + +<pre class="brush: js">// Seleziona il nodo di cui monitare la mutazione +var targetNode = document.getElementById('some-id'); + +// Opzioni per il monitoraggio (quali mutazioni monitorare) +var config = { attributes: true, childList: true, subtree: true }; + +// Funzione di callback da eseguire quando avvengono le mutazioni +var callback = function(mutationsList, observer) { + for(var mutation of mutationsList) { + if (mutation.type == 'childList') { + console.log('A child node has been added or removed.'); + } + else if (mutation.type == 'attributes') { + console.log('The ' + mutation.attributeName + ' attribute was modified.'); + } + } +}; + +// Creazione di un'istanza di monitoraggio collegata alla funzione di callback +var observer = new MutationObserver(callback); + +// Inizio del monitoraggio del nodo target riguardo le mutazioni configurate +observer.observe(targetNode, config); + +// Successivamente si può interrompere il monitoraggio +observer.disconnect();</pre> + +<h2 id="Leggi_pure">Leggi pure</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> +</ul> + +<h2 id="Specifications" name="Specifications">Specifiche</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifica</th> + <th scope="col">Stato</th> + <th scope="col">Commenti</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilità_dei_Browser">Compatibilità dei Browser</h2> + + + +<p>{{Compat("api.MutationObserver")}}</p> |