Mutation Observer в JavaScript
Mutation Observer - это JavaScript API, который позволяет вам отслеживать изменения в DOM (объектной модели документа) и получать уведомления о возникновении мутаций (изменений). Данный API позволяет отслеживать изменения в элементах, атрибутах или структуре дерева DOM.
С помощью Mutation Observer вы можете указать, какие конкретные изменения вы хотите наблюдать, такие как добавление или удаление дочерних элементов, изменения атрибутов элемента или даже изменения текстового содержимого внутри элемента. Когда происходит мутация, соответствующая указанным вами критериям, вы можете выполнить функцию обратного вызова для обработки изменения.
Наблюдатель мутаций полезен в сценариях, где необходимо динамически обновлять DOM или реагировать на изменения в нем, например, когда требуется обновить пользовательский интерфейс на основе взаимодействий с пользователем или модифицировать элементы на основе обновлений данных на стороне сервера.
Вот пример того, как использовать Mutation Observer в JavaScript:
// Callback function to handle mutations
const processMutation = (mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('Были добавлены дочерние элементы');
} else if (mutation.type === 'attributes') {
console.log('Произошло изменение атрибутов тега');
} else if (mutation.type === 'characterData') {
console.log('Текстовое содержимое элемента изменилось');
}
}
};
// Создайте новый экземпляр наблюдателя мутаций
const observer = new MutationObserver(processMutation);
// Выберите целевой узел для наблюдения
const targetNode = document.getElementById('targetElement');
// Настройте наблюдателя для отслеживания определенных типов мутаций
const config = {
childList: true, // наблюдаем за изменениями в дочерних узлах
attributes: true, // наблюдаем за изменениями атрибутов
characterData: true // следим за изменениями в текстовом содержимом тега
};
// Начинаем наблюдение за целевым узлом с помощью предоставленной конфигурации
observer.observe(targetNode, config);
// Прекратить наблюдение за мутациями
observer.disconnect();
В этом примере функция processMutation является коллбэком, который будет вызываться всякий раз, когда происходит мутация в DOM. При создании экземпляра класса MutationObserver в конструктор передается функция обратного вызова. Затем наблюдатель настраивается для отслеживания определенных типов мутаций. Он наблюдает за целевым узлом, используя предоставленную конфигурацию.
Обратите внимание, что Mutation Observer поддерживается только в современных браузерах и может быть недоступен в старых браузерах.
-
Создано 17.10.2023 10:30:28
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.