Wie erkennt man das Hinzufügen von Elementen im DOM: veraltet und Alternativen?

Beobachten des Hinzufügens von Elementen im DOM

Um eine Benachrichtigung zu erhalten, wenn ein Element zu einer Webseite hinzugefügt wird, stehen einige Ansätze zur Verfügung:

Veraltete Mutationsereignisse:

Früher konnten Mutationsereignisse (z. B. DOMNodeInserted) zur Überwachung von DOM-Änderungen verwendet werden. Allerdings sind diese Ereignisse jetzt veraltet.

Kontinuierliche Abfrage:

Ein veralteter Ansatz besteht darin, setInterval() zu verwenden, um regelmäßig zu prüfen, ob das gewünschte Element vorhanden ist:

<code class="js">function checkDOMChange() {
  // Check for element presence...

  // Continue polling after 100 milliseconds
  setTimeout(checkDOMChange, 100);
}</code>

Dies ist eine ineffiziente Lösung, die erhebliche CPU-Ressourcen verbraucht.

Empfohlen: MutationObserver

Moderne Browser unterstützen MutationObserver, der eine Alternative zur Mutation darstellt Ereignisse. Es ermöglicht Ihnen, DOM-Änderungen zu beobachten und eine Rückruffunktion auszuführen, wenn ein Element hinzugefügt wird:

<code class="js">const observer = new MutationObserver(mutations => {
  // Process DOM changes...
});

observer.observe(document.documentElement, { childList: true });</code>

Durch die Implementierung von MutationObserver können Sie DOM-Hinzufügungen effektiv überwachen, ohne die Einschränkungen veralteter Mutationsereignisse oder die Ineffizienz kontinuierlicher Abfragen .

Das obige ist der detaillierte Inhalt vonWie erkennt man das Hinzufügen von Elementen im DOM: veraltet und Alternativen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!