Livro de receitas da API da Web

Capítulo 6. Observando os elementos DOM

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

Introdução

Este capítulo de analisa três tipos de observadores que o browser te dá para observares os elementos DOM: MutationObserver, IntersectionObserver, e ResizeObserver. Estes objectos observadores podem observar elementos DOM e notificar-te de certas alterações ou eventos.

Os observadores são criados com uma função de retorno de chamada. Esta função é chamada sempre que ocorrem eventos relevantes na página. É chamada com uma ou mais entradas que contêm informações sobre o que ocorreu. Isto apenas cria o observador. Para começar a observar um elemento, tens de chamar observe no observador, passando o elemento que queres observar e um conjunto opcional de opções.

MutaçãoObservador

MutationObserver Observa as alterações no DOM para um elemento. Podes observar as alterações em:

• Elementos filhos

• Atributos

• Conteúdo do texto

O que o browser observa é definido num objeto de opções passado para a função observe. Também podes dar uma opção opcional subtree ao observar um elemento. Isto estende a monitorização de elementos filhos, atributos e/ou conteúdo de texto a todos os nós descendentes (em vez de apenas o elemento e os seus filhos diretos).

Quando ocorre uma mutação que te interessa, o teu callback é executado com um array de objectos MutationEntry que descrevem a mutação que acabou de ocorrer.

RedimensionarObservador ...