Web API Cookbook

Capitolo 6. Osservare gli elementi del DOM

Questo lavoro è stato tradotto utilizzando l'AI. Siamo lieti di ricevere il tuo feedback e i tuoi commenti: [e-mail]

Introduzione

Questo capitolo di analizza tre tipi di osservatori che il browser mette a disposizione per osservare gli elementi DOM: MutationObserver, IntersectionObserver, e ResizeObserver. Questi oggetti osservatori possono osservare gli elementi DOM e notificare determinati cambiamenti o eventi.

Gli osservatori vengono creati con una funzione di callback. Questa funzione viene chiamata ogni volta che si verificano eventi rilevanti nella pagina. Viene chiamata con una o più voci che contengono informazioni sull'evento. In questo modo si crea solo l'osservatore. Per iniziare a osservare un elemento, devi chiamare observe sull'osservatore, passando l'elemento che vuoi osservare e una serie di opzioni.

MutationObserver

MutationObserver osserva i cambiamenti nel DOM di un elemento. Puoi osservare le modifiche a:

• Elementi figli

• Attributi

• Contenuto del testo

Ciò che il browser osserva è definito in un oggetto opzioni passato alla funzione observe. Puoi anche fornire un'opzione opzionale subtree quando osservi un elemento. Questo estende il monitoraggio degli elementi figli, degli attributi e/o del contenuto del testo a tutti i nodi discendenti (invece che solo all'elemento e ai suoi figli diretti).

Quando si verifica una mutazione che ti interessa, la tua callback viene eseguita con un array ...