Web API Kochbuch

Kapitel 6. Beobachtung von DOM-Elementen

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Einführung

Dieses Kapitel befasst sich mit drei Arten von Beobachtern, die dir der Browser zur Verfügung stellt, um DOM-Elemente zu beobachten: MutationObserver, IntersectionObserver, und ResizeObserver. Diese Beobachterobjekte können DOM-Elemente beobachten und dich über bestimmte Änderungen oder Ereignisse informieren.

Beobachter werden mit einer Callback-Funktion erstellt. Diese Funktion wird aufgerufen, wenn relevante Ereignisse auf der Seite auftreten. Sie wird mit einem oder mehreren Einträgen aufgerufen, die Informationen darüber enthalten, was passiert ist. Damit wird nur der Beobachter erstellt. Um ein Element zu beobachten, rufst du observe auf und übergibst das Element, das du beobachten willst, sowie eine optionale Reihe von Optionen.

MutationObserver

MutationObserver achtet auf Änderungen im DOM für ein Element. Du kannst auf Änderungen in folgenden Bereichen achten:

• Kindliche Elemente

• Attribute

• Textinhalt

Was der Browser beobachtet, wird in einem Optionsobjekt definiert, das an die Funktion observe übergeben wird. Du kannst auch eine optionale subtree Option angeben, wenn du ein Element beobachtest. Damit wird die Überwachung von Kindelementen, Attributen und/oder Textinhalten auf alle nachgeordneten Knoten ausgeweitet (statt nur auf das Element und seine direkten Kinder).

Wenn eine ...