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

1. Grundlegende Verwendung

Es kann über den MutationObserver-Konstruktor instanziiert werden und der Parameter ist eine Rückruffunktion.

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

Konsole.log(Beobachter);

Die Prototypenkette des Beobachterobjekts sieht wie folgt aus:

MutationObserver-Instanz:

Sie können sehen, dass es die Methoden disconnect , observer und takeRecords gibt.

1. Beobachtermethode Überwachung

observer wird verwendet, um DOM Elemente zuzuordnen und entsprechend den zugehörigen Einstellungen zu lauschen.

Die Syntax lautet wie folgt:

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

In:
Das erste Parameter-DOM-Element ist das Seitenelement, z. B. Body, Div usw.
Der zweite Parameter dient zur Einstellung des zu überwachenden Bereichs. Beispiel: Attribute, Text, untergeordnete Knoten usw. sind ein Array von Schlüssel-Wert-Paaren.

Beispiel 1: Änderungen in der Body-Elementklasse überwachen:

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

Die Ausgabe der obigen change erfolgt nach der Änderung body Attributs. Es ist ersichtlich, dass die registrierte Rückruffunktion asynchron ausgeführt wird und später ausgeführt wird.

2. Fügen Sie der Callback-Funktion den Array-Parameter der MutationRecord-Instanz hinzu

Nun ist die Rückruffunktion sehr simpel, sie gibt lediglich einen String aus und es ist unklar, welche Änderungen stattgefunden haben.

Tatsächlich erhält die Rückruffunktion ein Array von MutationRecord Instanzen, mit denen in der Praxis detaillierte Informationen angezeigt werden können.

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]

Die MutationRecords-Informationen lauten wie folgt:

MutationRecord-Beispiel :

Einige der wichtigeren Informationen:

attributeName gibt den Namen des zu ändernden Attributs an
ZielÄndern Sie das target
type

Wenn Sie die Attribute des Textkörpers mehrmals ändern, entstehen mehrere Datensätze:

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

Beachten:

Hier wird der Callback nicht einmal für jede Änderung ausgeführt. Stattdessen wird bei jeder Änderung eine MutationRecord-Instanz zum Parameter mutationRecords hinzugefügt und anschließend ein Callback ausgeführt, um die Instanz auszudrucken.
Wenn für jede Änderung einmal ein Rückruf ausgeführt wird, ist die Leistung schlecht.

3. Die Disconnect-Methode beendet den Rückruf

Wenn Sie den Rückruf beenden möchten, können Sie die Methode „Disconnect“ verwenden.

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

Eine Log-Ausgabe, auch der ersten Änderung, erfolgt hier nicht, da die Callback-Funktion asynchron und zuletzt ausgeführt wird. observer wird später beendet, sodass er nicht ausgeführt wird.

Mit „setTimeout“ können Sie die endgültige Beendigung steuern, sodass der Rückruf normal ausgeführt wird.

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]

Reaktivierung nach Kündigung

Nach dem Beenden können Sie es neu starten, siehe folgendes Beispiel:

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]

Die Rückruffunktion wird hier zweimal ausgeführt und druckt zwei Werte:

Die erste Ausgabe ist die erste Änderung. Da danach kein Synchronisationscode mehr erfolgt, wird der Callback ausgeführt.
Die zweite Ausgabe ist die dritte Änderung. Da sie wieder aktiviert ist, wird der Rückruf normal ausgeführt.

Bei der zweiten Änderung werden die geänderten body -Attribute nicht in das mutationRecords Array aufgenommen, da observer beendet wird.

4. Die Methode takeRecords ruft geänderte Datensätze ab

Wenn Sie die vorhandenen mutationRecords verarbeiten möchten, bevor Sie observer beenden, können Sie die Methode takeRecords verwenden, um sie abzurufen.

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

2. Auf mehrere Elemente hören

Die obige Überwachung hat nur ein Element. Wenn Sie mehrere Elemente überwachen möchten, können Sie MutationObserver Instanz wiederverwenden

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]

Die Konsole druckt zwei MutationRecords, darunter:

Der erste MutationRecord ist der Änderungsdatensatz des ID-Attributs von div1.
Der zweite MutationRecord ist der Änderungsdatensatz des ID-Attributs von div2.

Andere Verwendungen ähneln den oben genannten.

3. Überwachungsbereich MutationObserverInit-Objekt

Bei der obigen Überwachung geht es um die Überwachung von Attributen. Natürlich können Sie auch andere Dinge überwachen, beispielsweise: Text, untergeordnete Knoten usw.

1. Eigenschaften beobachten

Die obigen Beispiele berücksichtigen alle die Attribute des Elements selbst. Hier ist ein weiteres Beispiel für benutzerdefinierte Attribute.

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]

Das Ändern benutzerdefinierter Attribute wird auch zum mutationRecords Array hinzugefügt.

Erwähnenswert ist auch, dass data-id häufig verwendet wird, um Elemente mit Daten oder Ähnlichem zu markieren. Wenn eine Änderung vorliegt, kann das Programm diese überwachen und eine entsprechende Logik verarbeiten.

attributeFilter-Filterung:

Wenn Sie Änderungen in angegebenen Attributen überwachen möchten, können Sie zum Filtern attributeFilter verwenden.

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]

attributeOldValue zeichnet den alten Wert auf :

Wenn Sie den alten Wert aufzeichnen möchten, können Sie attributeOldValue auf true setzen.

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

2. Beachten Sie den Text

Um den Text zu beobachten, setzen Sie characterData auf true , aber es können nur Textknoten beobachtet werden.

Betrachten Sie das folgende Beispiel:

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

Wenn Sie direkt auf das Div-Element hören, funktioniert es nicht:

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

characterDataOldValue zeichnet den alten Wert auf:

Wenn Sie den alten Wert des Textes aufzeichnen möchten, können Sie characterDataOldValue auf true setzen.

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

Da der ursprüngliche Inhalt im Div „Hallo“ war, wurde er zuerst in „Hi“ und dann in „Nice“ geändert. Daher lauten die alten Werte nach den beiden Änderungen: „Hallo“ und „Hi“.

3. Untergeordnete Knoten beobachten

MutationObserver -Instanzen können auch Änderungen in den untergeordneten Knoten des Zielknotens beobachten.

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

Das Attribut addedNodes im MutationRecord zeichnet die hinzugefügten Knoten auf.

So entfernen Sie einen Knoten:

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

removedNodes in MutationRecord zeichnet die entfernten Knoten auf.

Mobiler Knoten:

Wenn ein bestehender Knoten verschoben wird, werden zwei MutationRecord Datensätze aufgezeichnet, da das Verschieben eines bestehenden Knotens bedeutet, dass dieser zuerst gelöscht und dann hinzugefügt wird.

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

4. Beobachten Sie den Teilbaum

Die oben beobachteten Knoten sind alle aktuell festgelegten Zielknoten. Für body können Sie beispielsweise nur Änderungen im body -Element und seinen untergeordneten Knoten beobachten.

Wenn Sie Änderungen am body und allen seinen untergeordneten Knoten beobachten möchten, können Sie subtree auf true setzen.

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

Nachdem subtree auf true gesetzt wurde, kann nicht nur das div-Element selbst, sondern auch span Element beobachtet werden.

Zusammenfassen:

1. MutationObserver -Instanzen können zum Beobachten von Objekten verwendet werden.
2. Die MutationRecord Instanz zeichnet jede Änderung auf.
3. Die Rückruffunktion wird erst ausgeführt, nachdem alle Skriptaufgaben abgeschlossen sind, d. h. sie verwendet eine asynchrone Methode.
4. Die beobachtbaren Zugriffe sind Attribute, Text, untergeordnete Knoten und Teilbäume.

Dies ist das Ende dieses Artikels über die Details der Überwachung von DOM-Elementen MutationObServer in JavaScript . Weitere relevante Inhalte zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

JavaScript überwacht eine Änderung der DOM-Elementgröße
Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript
Einführung in Javascript DOM, Knoten und Elementerfassung
Detaillierte Erläuterung von JavaScript-WebAPI-, DOM-, Ereignis- und Operationselementbeispielen

<<: Lösen Sie das Matching-Problem in CSS

>>: Methode zum Knacken der Registrierung der FlashFXP-FTP-Clientsoftware

Lösung für das Problem, dass das Hintergrundbild eines Etiketts im IE8 nicht angezeigt wird

Detaillierte Erläuterung der sinnvollsten Methode zum Partitionieren der Festplatte bei der Installation des Ubuntu-Linux-Systems

Artikel

React implementiert doppelten Schieberegler zum Querschieben

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

1. Grundlegende Verwendung

1. Beobachtermethode Überwachung

2. Fügen Sie der Callback-Funktion den Array-Parameter der MutationRecord-Instanz hinzu

3. Die Disconnect-Methode beendet den Rückruf

4. Die Methode takeRecords ruft geänderte Datensätze ab

2. Auf mehrere Elemente hören

3. Überwachungsbereich MutationObserverInit-Objekt

1. Eigenschaften beobachten

2. Beachten Sie den Text

3. Untergeordnete Knoten beobachten

4. Beobachten Sie den Teilbaum

Lösung für das Problem, dass das Hintergrundbild eines Etiketts im IE8 nicht angezeigt wird

Der DOCTYPE-Modusauswahlmechanismus bekannter Browser

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 auf dem Mac

Das WeChat-Applet implementiert einen einfachen Rechner

Detaillierte Erläuterung der sinnvollsten Methode zum Partitionieren der Festplatte bei der Installation des Ubuntu-Linux-Systems

React implementiert doppelten Schieberegler zum Querschieben

Zusammenfassung der Tests für logische MySQL-Sicherungen und -Wiederherstellungen

Linux /etc/network/interfaces Konfigurationsschnittstellenmethode

Im Mybatis MySQL-Löschvorgang kann nur die erste Datenmethode gelöscht werden

Ist es notwendig, dem Img-Bild-Tag ein Alt-Attribut zuzuweisen?

Artikel empfehlen

Detaillierte Fehlerbehebung bei Docker.service-Startfehlern

So verwenden Sie die Firewall-Iptables-Strategie zum Weiterleiten von Ports auf Linux-Servern

Warum sollte CSS im Head-Tag platziert werden?

Docker-Compose erstellt eine Brücke, fügt ein Subnetz hinzu und löscht eine Netzwerkkarte

Neunundvierzig JavaScript-Tipps und Tricks

Implementierung einer verschiebbaren Komponente zum Teilen des linken und rechten Bedienfelds in Vue3

So konfigurieren Sie den Redis-Sentinel-Modus in Docker (auf mehreren Servern)

Eine schnelle Lösung für das Problem des automatischen Zeilenumbruchs in Tabellenüberschriften im Responsive Framework

Beispiel für den Aufbau eines Jenkins-Dienstes mit Docker

Mehrere Möglichkeiten, das gepunktete Kästchen zu entfernen, das beim Klicken auf einen Link angezeigt wird

Grundlegendes Tutorial zum Hinzufügen, Löschen, Ändern und Abfragen von MySQL-Tabellen

Detaillierte Erklärung des Unterschieds zwischen tinyint und int in MySQL

So erweitern Sie die Festplattenpartition für das CentOS-System

Zwei Möglichkeiten zum Aktivieren der Firewall im Linux-Dienst

Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)