From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/it/web/api/mutationobserver/index.html | 102 +++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 files/it/web/api/mutationobserver/index.html (limited to 'files/it/web/api/mutationobserver') 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 +--- +
{{APIRef("DOM WHATWG")}}
+ +

L'interfaccia {{domxref("MutationObserver")}} offre la possibilità di monitorare le mutazioni subite dall'alberatura del DOM. È stata progettata per sostituire i Mutation Events che fanno parte del DOM3 Events specification.

+ +

Costruttore

+ +
+
{{domxref("MutationObserver.MutationObserver", "MutationObserver()")}}
+
Crea e restituisce un nuovo MutationObserver che invocherà una funzione di callback specificata alla mutazione del DOM.
+
+ +

Metodi

+ +
+
{{domxref("MutationObserver.disconnect", "disconnect()")}}
+
Interrompe la ricezione da parte dell'istanza MutationObserver di notifiche sulla mutazione del DOM fino a quando verrà nuovamente invocato {{domxref("MutationObserver.observe", "observe()")}}
+
{{domxref("MutationObserver.observe", "observe()")}}
+
Configura il MutationObserver affinché possa ricevere notifiche attraverso la funzione di callback specificata quando avviene una mutazione del DOM che corrisponda alle opzioni impostate.
+
{{domxref("MutationObserver.takeRecords", "takeRecords()")}}
+
Rimuove tutte le notifiche in coda sul MutationObserver e le restituisce come nuovo  {{jsxref("Array")}} di oggetti {{domxref("MutationRecord")}}
+
+ +

Mutation Observer & customizzazione del resize event & demo

+ +

https://codepen.io/webgeeker/full/YjrZgg/

+ +

Esempio

+ +

L'esempio seguente è un adattamento di questo post

+ +
// 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();
+ +

Leggi pure

+ + + +

Specifiche

+ + + + + + + + + + + + + + + + +
SpecificaStatoCommenti
{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilità dei Browser

+ + + +

{{Compat("api.MutationObserver")}}

-- cgit v1.2.3-54-g00ecf