Отслеживание изменений в DOM через Mutation Events и MutationObserver

Время статичных web-страниц уже давно прошло, теперь немалая часть контента подгружается динамически уже после загрузки основной страницы. Соответственно, эти данные недоступны для скриптов, отслеживающих загрузку через события типа onload или DOMContentLoaded. Может возникнуть вопрос: а зачем вообще это отслеживать? Ну, например, чтобы при помощи браузерных расширений и пользовательских скриптов удалять со страниц динамически подгружаемую рекламу, которую другими способами не заблокировать. К счастью, для отслеживания любых изменений, вносимых в структуру DOM, есть как минимум два инструмента. Речь идет о событиях Mutation Events и интерфейсе MutationObserver.

Начнем с Mutation Events. Это была первая технология, представленная разработчиками браузеров, позволяющая web-мастерам отслеживать изменения в DOM и каким-то образом реагировать на них. Это набор событий, срабатывающих при добавлении или удалении элемента, изменении атрибутов, содержимого и т.п. Использовать их можно как и любые другие события. Приложению достаточно выбрать отслеживаемый элемент и повесить на него обработчик соответствующего события или событий, в зависимости от поставленной задачи.Таким образом можно получить всю информацию как о добавляемом элементе, так и о целевом элементе, куда он будет добавлен. Имея эти данные, в обработчике можно, например, удалить добавленный элемент, изменить его содержимое или выполнить другие необходимые действия.

При кажущейся простоте использования, события Mutation Events остаются событиями, поэтому вызываются синхронно. В связи с этим они имеют большие проблемы с производительностью, особенно в случае, когда меняется много элементов. Более того, если обработчик попытается самостоятельно добавить какой-нибудь элемент к целевому, то это также повлечет за собой срабатывания этого же обработчика, что в конечном итоге может привести к непредсказуемым результатам. Поэтому буквально через год после релиза технология Mutation Events получила статус "устаревшей", да и поддержка этих событий браузерами оставляет желать лучшего.

Следующим шагом развития технологии отслеживания изменений на странице стало появление браузерного API DOM MutationObserver, который должен был избавиться от недостатков Mutation Events. Пользоваться DOM MutationObserver не намного сложнее, чем событиями. Выбираем элемент, в котором будут отслеживаться изменения, создаем объект наблюдателя и задаем конфигурацию, в которой прописываем, какие изменения нас интересуют. Это может быть изменение атрибутов, содержимого, добавление или удаление элементов.Наблюдателю передается список записей MutationRecord, в которых содержится информация о произошедших изменениях. Все есть в документации, но вот наиболее интересные поля:

• type - тип изменения, одно из возможных значений: "attributes" - изменен атрибут, "characterData" - изменены данные текстовых узлов, "childList" - добавлены или удалены дочерние элементы;
• target - где произошло изменение: элемент для "attributes", текстовый узел для "characterData" или элемент для "childList";
• addedNodes/removedNodes – список добавленных и удаленных элементов;
• oldValue - предыдущее значение при изменении атрибута или текста.

В отличие от Mutation Events, функция наблюдателя сработает только тогда, когда выполнятся все скрипты и все изменения DOM полностью завершатся. Разные опции конфигурации наблюдателя предназначены для оптимизации, чтобы не тратить ресурсы на лишние вызовы.

Когда наблюдатель больше не нужен, его можно отключить методом disconnect(). Но даже после отключения наблюдателя, последние необработанные записи будут доступны через метод takeRecords().

Комментарии

Добавить комментарий

Для вставки цитаты выделите текст и нажмите сюда

Имя*:

Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.

Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.