Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript

let observer = neuer MutationObserver(() => console.log("ändern"));

Konsole.log(Beobachter);

// Erhalte zwei Parameter: Observer (DOM-Element, MutationObserverInit-Objekt);

let observer = neuer MutationObserver(() => console.log("ändern"));

//Überwachen Sie die Attributänderungen des Body-Elements observer.observe(document.body, {

    Attribute: wahr

});

// Durch Ändern der Klasse des Body-Elements wird die Rückruffunktion asynchron ausgeführt, die beim Erstellen des MutationObserver-Objekts übergeben wurde. document.body.className = "main";

console.log("Body-Attribute geändert");

// Konsolenausgabe:

// Die Body-Attribute wurden geändert // ändern

let observer = neuer MutationObserver(

    // Die Rückruffunktion ist ein Array von MutationRecord-Instanzen. Das Format ist wie folgt:

    // [Mutationsdatensatz, Mutationsdatensatz, Mutationsdatensatz, ...]

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: wahr

});

Dokument.Body.Klassenname = "Haupt";

console.log("Body-Attribute geändert");

// Konsolenausgabe:

// Die Body-Attribute wurden verändert // (1) [MutationRecord]

// Mutationsaufzeichnung

let Beobachter = neuer MutationObserver(

    // Die Rückruffunktion empfängt eine MutationRecord-Instanz, die ein Array ist.

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: wahr

});

 

// Dreimal ändern document.body.className = "main";

Dokument.Body.Klassenname = "Container";

Dokument.Body.Klassenname = "Box";

 

// Die Konsole druckt Folgendes:

// (3) [Mutationsdatensatz, Mutationsdatensatz, Mutationsdatensatz]

let Beobachter = neuer MutationObserver(

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: wahr

});

// Erste Änderung document.body.className = "main";

 

//Beenden Sie observer.disconnect();

 

// Zweite Änderung document.body.className = "container";

 

// Keine Log-Ausgabe

let Beobachter = neuer MutationObserver(

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: wahr

});

// Erste Änderung document.body.className = "main";

 

// Beenden setTimeout(() => {

    Beobachter.trennen();

    // Die dritte Änderung, die folgende Änderung wird nicht zurückgerufen document.body.className = "container";

}, 0);

 

// Zweite Änderung document.body.className = "container";

 

// Seitenausgabe:

// (2) [Mutationsdatensatz, Mutationsdatensatz]

let Beobachter = neuer MutationObserver(

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: wahr

});

// Die erste Änderung wird in das Array „mutationRecords“ eingetragen. document.body.className = „main“;

// Beenden setTimeout(() => {

    Beobachter.trennen();

    // Zweite Änderung, da diese beendet wird, werden die folgenden Änderungen nicht in das mutationRecords-Array eingetragen document.body.className = "container";

}, 0);

setzeTimeout(() => {

    // Beobachter erneut aktivieren.observe(document.body, {

        Attribute: wahr

    });

    // Ändern Sie die Body-Attribute und geben Sie das mutationRecords-Array ein. document.body.className = "container";

}, 0);

 

// Konsolenausgabe:

// [Mutationsdatensatz]

// [Mutationsdatensatz]

let Beobachter = neuer MutationObserver(

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: wahr

});

 

// Die erste Änderung wird in das mutationRecords-Array eingetragen document.body.className = "main";

// Die zweite Änderung wird in das mutationRecords-Array eingetragen document.body.className = "container";

// Die dritte Änderung wird in das mutationRecords-Array eingetragen document.body.className = "box";

// Änderungsdatensatz abrufen und verarbeiten let mutationRecords = observer.takeRecords();

console.log(Mutationsdatensätze);

// Konsolendruck:

// (3) [Mutationsdatensatz, Mutationsdatensatz, Mutationsdatensatz]

Konsole.log(Beobachter.takeRecords());

// Konsolendruck:

// []

//Beenden Sie observer.disconnect();

let Beobachter = neuer MutationObserver(

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

// Div1-Element erstellen und abhören let div1 = document.createElement("div");

Beobachter.beobachten(div1, {

    Attribute: wahr

});

div1.id = "Box1";

 

// div2 erstellen und abhören let div2 = document.createElement("div");

Beobachter.beobachten(div2, {

    Attribute: wahr

});

div2.id = "Box2";

 

// Konsolendruck:

// (2) [Mutationsdatensatz, Mutationsdatensatz]

let Beobachter = neuer MutationObserver(

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: wahr

});

// Benutzerdefinierte Attribute ändern document.body.setAttribute("data-id", 1);

 

// Konsolendruck:

// [Mutationsdatensatz]

let Beobachter = neuer MutationObserver(

    (Mutationsdatensätze) => console.log(Mutationsdatensätze)

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: true,

    // Whitelist-Attributfilter festlegen: ["data-id"]

});

 

//Ändern Sie die Attribute in der Whitelist attributeFilter und geben Sie mutationRecords ein

document.body.setAttribute("Daten-ID", 1);

 

// Ändern Sie die Attribute, die nicht in der Whitelist attributeFilter sind und nicht in mutationRecords eingetragen werden

document.body.setAttribute("Klasse", "Haupt");

 

// Konsolendruck:

// [Mutationsdatensatz]

let Beobachter = neuer MutationObserver(

    // oldValue im MutationRecord-Objekt stellt den alten Wert dar (mutationRecords) => console.log(mutationRecords.map((x) => x.oldValue))

);

Beobachter.beobachten(Dokument.Text, {

    Attribute: true,

    attributeOldValue: true,

});

// Erste Änderung, da ursprünglich kein Wert vorhanden ist, alter Wert oldValue = null

document.body.setAttribute("Klasse", "Haupt");

// Zweite Änderung, da bereits einmal geändert, der alte Wert oldValue = main

document.body.setAttribute("Klasse", "Container");

 

// Konsolendruck:

// (2) [null, 'main']

<!-- Ein sexy div -->

<div id="box">Hallo</div>

<Skripttyp="text/javascript">

    let Beobachter = neuer MutationObserver(

        (Mutationsdatensätze) => console.log(Mutationsdatensätze)

    );

    // Textknoten abrufen let textNode = document.getElementById("box").childNodes[0];

    Beobachter.beobachten(textNode, {

        //Textänderungen beobachten characterData: true

    });

    // Den Text ändern textNode.textContent = "Hi";

 

    // Konsolendruck:

    // [Mutationsdatensatz]

</Skript>

<!-- Ein sexy div -->

<div id="box">Hallo</div>

<Skripttyp="text/javascript">

    let observer = neuer MutationObserver(

        (Mutationsdatensätze) => console.log(Mutationsdatensätze)

    );

    // Das Abhören von div hat keine Wirkung let box = document.getElementById("box");

    Beobachter.beobachten(box, {

        Zeichendaten: true

    });

    box.textContent = "Hallo";

 

    //Keine Ausgabe in der Konsole</script>

<!-- Ein sexy div -->

<div id="box">Hallo</div>

 

<Skripttyp="text/javascript">

    let Beobachter = neuer MutationObserver(

        (Mutationsaufzeichnungen) => Konsole.Protokoll(Mutationsaufzeichnungen.Map((x) => x.alterWert))

    );

    // Textknoten abrufen let textNode = document.getElementById("box").childNodes[0];

    Beobachter.beobachten(textNode, {

        //Textänderungen beobachten characterData: true,

        // Alte Daten behalten characterDataOldValue: true,

    });

    // Den Text zweimal ändern textNode.textContent = "Hi";

    textNode.textContent = "Nett";

 

    // Konsolendruck:

    // (2) ['Hallo', 'Hi']

</Skript>

<!-- Ein sexy div -->

<div id="box">Hallo</div>

<Skripttyp="text/javascript">

    let Beobachter = neuer MutationObserver(

        (Mutationsdatensätze) => console.log(Mutationsdatensätze)

    );

    // Holen Sie sich das div

    let box = document.getElementById("box");

    Beobachter.beobachten(box, {

        //Änderungen in untergeordneten Knoten beobachten childList: true,

    });

    //Element hinzufügen let span = document.createElement("span")

    span.textContent = "Welt";

    box.anhängenUntergeordnetesElement(span);

 

    // Konsolendruck:

    // [Mutationsdatensatz]

</Skript>

<!-- Ein sexy div -->

<div id="box">Hallo</div>

 

<Skripttyp="text/javascript">

    let Beobachter = neuer MutationObserver(

        (Mutationsdatensätze) => console.log(Mutationsdatensätze)

    );

 

    // Holen Sie sich das div

    let box = document.getElementById("box");

    Beobachter.beobachten(box, {

        //Änderungen in untergeordneten Knoten beobachten childList: true,

    });

    // Entfernen Sie den ersten untergeordneten Knoten, bei dem es sich um den Textknoten „Hallo“ handelt. box.removeChild(box.childNodes[0]);

 

    // Konsolendruck:

    // [Mutationsdatensatz]

</Skript>

<!-- Ein sexy div -->

<div id="box">Hallo<span>Welt</span></div>

 

<Skripttyp="text/javascript">

    let observer = neuer MutationObserver(

        (Mutationsdatensätze) => console.log(Mutationsdatensätze)

    );

 

    // Holen Sie sich das div

    let box = document.getElementById("box");

    Beobachter.beobachten(box, {

        //Änderungen in untergeordneten Knoten beobachten childList: true,

    });

    // Verschiebe den Span-Knoten vor den Hello-Knoten box.insertBefore(box.childNodes[1], box.childNodes[0]);

    // Das Verschieben eines Knotens bedeutet eigentlich, ihn zuerst zu löschen und dann hinzuzufügen.

 

    // Konsolendruck:

    // (2) [Mutationsdatensatz, Mutationsdatensatz]

</Skript>

<!-- Ein sexy div -->

<div id="box">Hallo<span>Welt</span></div>

 

<Skripttyp="text/javascript">

    let Beobachter = neuer MutationObserver(

        (Mutationsdatensätze) => console.log(Mutationsdatensätze)

    );

 

    let box = document.getElementById("box");

    Beobachter.beobachten(box, {

        Attribute: true,

        //Beobachten Sie die Änderungen des Teilbaums subtree: true

    });

    // Änderungen im ID-Attribut des Span-Elements können beobachtet werden box.childNodes[1].id = "text";

    // Konsolendruck:

    // [Mutationsdatensatz]

</Skript>