[ITEM 4] QUESTION: Что такое Mutation Observer?

Інтерфейс Mutation Observer в JavaScript є вбудованим механізмом, який дозволяє асинхронно відстежувати будь-які зміни, що відбуваються в об'єктній моделі документа, тобто в структурі DOM. Цей інструмент прийшов на зміну застарілим мутаційним подіям і працює набагато ефективніше, оскільки збирає всі зміни в пакети і викликає функцію зворотного виклику один раз за цикл відтворення.

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

В об'єкті конфігурації можна вказати параметри childList для відстеження додавання або видалення дочірніх елементів, attributes для спостереження за зміною атрибутів, а також characterData для відстеження зміни текстового вмісту вузлів. Крім того, якщо потрібно стежити не тільки за прямими нащадками, а й за всією вкладеною структурою дерева елементів всередині цільового вузла, використовується логічний флаг subtree зі значенням true. Це незамінно при створенні складних користувацьких інтерфейсів, плагінів автоматичного перекладу тексту або систем тестування.