Как работает JS: отслеживание изменений в DOM с помощью MutationObserver

[VolCh]

Использовал для двух кейсов:

• очищать DOM от изменений какого-то jquery плагина, который что-то важное делал при загрузке, но потом жутко тормозил
• отслеживал попытки пользователей модифицировать DOM, когда видел в логах что приходят запросы, которые не должны проходить. Часть выявленного ушла на улучшение юзабилити, часть в СБ. В общем доли процента.

[rework]

Честно говоря, использование MutationObserver кажется на добавление костылей в код. Ведь нас столько лет убеждали, что view не должен меняться сам по себе, мы должны контролировать его изменения, который могу произойти только при разнообразных асинхронных событиях (Таймеры, пользовательские события ввода, ответ от AJAX запросов, события от сервера через сокеты и т.д.). Если у вас возникает желание подписаться напрямую на изменения в DOM, то скорее всего что-то не так с архитектурой вашего приложения. В голову приходит только один кейс, когда какая-либо сторонняя библиотека вносит изменения в DOM и мы не можем напрямую подписаться на события которые к этому приводят.

[napa3um]

Да, тоже считаю, что этот инструмент не для использования внутри одного приложения, а, скорее, для написания браузерных плагинов и сервисов, работающих со сторонними сайтами, не предоставляющими API для взаимодействия. Парсинг, автоматизированное тестирование GUI и т.п.

[movl]

Когда в StreamKeys добавлял поддержку нового плеера VK, не нашел другого адекватного способа отслеживать изменения, будучи сторонним наблюдателем. Решил использовать это API, так как инициализация плеера происходила в два действия, сначала кликаешь на плеер в шапке, потом на кнопку плей (не знаю как сейчас), а между действиями ожидаешь неопределенное количество времени, плюс это позволило улучшить поддержку старого плеера, что еще было актуально.

Очень специфичные кейсы у этого API все же, но для каких-нибудь тестов или статистики, почему бы и нет.

[avlapeto]

Использовали в проекте чтобы отловить асинхронные изменения сделанные сторонним скриптом (аппенд отдельного элемента) и запустить реакцию на эти изменения. Звучит как костыль, но позволило элегантно решить проблему.

[houligan]

Незаменимый инструмент для интеграции веб-аналитики. Буквально на всё, что угодно, можно поставить «сенсоры». Особенно актуально, когда нет прямого доступа к исходному коду приложения, и единственная возможная среда интеграции — тег менеджеры на javascript (Google Tag Manager, Tealium и подобные).

[torbasow]

Ничего не сказано об асинхронности MutationObserver, а это очень важная его особенность. Для меня было неожиданностью, когда я включал наблюдение за изменениями DOM, потом в том же синхронном коде вставлял узел, а обработчик этого не замечал.