Libro de recetas de la API web

Capítulo 6. Observación de los elementos del DOM

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Introducción

Este capítulo de examina tres tipos de observadores que el navegador te proporciona para observar los elementos del DOM: MutationObserver, IntersectionObserver, y ResizeObserver. Estos objetos observadores pueden vigilar los elementos del DOM y notificarte determinados cambios o eventos.

Los observadores se crean con una función de llamada de retorno. Esta función se llama cada vez que se producen eventos relevantes en la página. Se llama con una o varias entradas que contienen información sobre lo ocurrido. Esto sólo crea el observador. Para empezar realmente a observar un elemento, tienes que llamar a observe en el observador, pasándole el elemento que quieres observar y un conjunto opcional de opciones.

Observador de mutaciones

MutationObserver busca cambios en el DOM de un elemento. Puedes vigilar los cambios en:

• Elementos hijos

• Atributos

• Contenido del texto

Lo que observa el navegador se define en un objeto de opciones que se pasa a la función observe. También puedes dar una opción subtree al observar un elemento. Esto amplía el monitoreo de elementos hijos, atributos y/o contenido de texto a todos los nodos descendientes (en lugar de sólo al elemento y sus hijos directos).

Cuando se produce una mutación que te interesa, tu llamada de retorno se ejecuta con una matriz de objetos MutationEntry ...