DOM и React Senior DOM на практике обновлено
MutationObserver
Условие
Функция watchAdded(root, onAdd) вызывает onAdd(element) для каждого элемента, добавленного в поддерево. Верни функцию остановки.
Что проверяют тесты
замечает добавленные узлы
остановка работает
Как подойти
MutationObserver работает асинхронно, пачками, в микрозадаче - поэтому в тестах его результат надо ждать. Без subtree: true видны только прямые потомки. Обязательно disconnect, иначе наблюдатель держит поддерево и течёт память.
Подсказки: 3
- observe(target, { childList: true, subtree: true }) следит за всем поддеревом.
- Колбэк получает массив записей, у каждой есть addedNodes.
- addedNodes содержит и текстовые узлы - фильтруй по nodeType.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.