Что такое Mutation Observer?

Интерфейс Mutation Observer в JavaScript представляет собой встроенный механизм, который позволяет асинхронно отслеживать любые изменения, происходящие в объектной модели документа, то есть в структуре DOM. Этот инструмент пришел на смену устаревшим мутационным событиям и работает гораздо эффективнее, так как собирает все изменения в пакеты и вызывает функцию обратного вызова один раз за цикл отрисовки.

Создание наблюдателя выполняется с помощью конструктора new MutationObserver(callback), куда передается функция, принимающая массив записей об изменениях и сам экземпляр наблюдателя. Чтобы начать слежку за конкретным узлом, используется метод observer.observe(target, config), где target — это целевой DOM-элемент, а config — объект конфигурации, определяющий типы отслеживаемых изменений.

В объекте конфигурации можно указать параметры childList для отслеживания добавления или удаления дочерних элементов, attributes для наблюдения за изменением атрибутов, а также characterData для отслеживания изменения текстового содержимого узлов. Кроме того, если требуется следить не только за прямыми потомками, но и за всей вложенной структурой дерева элементов внутри целевого узла, используется логический флаг subtree со значением true. Это незаменимо при создании сложных пользовательских интерфейсов, плагинов автоматического перевода текста или систем тестирования.