Как прослушивать изменения DOM

JavaScript

предисловие

В структуре MVVM первым является отслеживание изменений данных на основе данных.

  • Все мы знаем, что можем прослушивать изменения данных через Object.defineProperties() или использовать прокси и отражение.
  • На самом деле в MVVM тоже есть сценарии для манипулирования DOM. Итак, какие API мы используем для мониторинга изменений DOM?

Когда мы манипулируем DOM через JS, нам нужно уведомить DOM об обновлении представления. В VUE поддерживается асинхронная очередь. Дело не в том, что вы изменяете DOM, и он обновляется непосредственно в представлении.

Как отслеживать изменения DOM:

  • голосование
  • MutationEvents (в основном устарело)
  • CSS-анимация

Ни один из трех вышеперечисленных методов не является очень хорошим. Итак, давайте сегодня познакомим вас с наиболее часто используемыми:

  • MutationObserver

Мы выбираем Mutation Observer

Обзор

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

Например, если в документ непрерывно вставляется 1000 элементов li, будет непрерывно срабатывать 1000 событий вставки, и будет выполняться callback-функция каждого события, что, скорее всего, приведет к зависанию браузера, тогда как Mutation Observer совершенно другой. , only in 1000 Он сработает только после вставки всех абзацев и только один раз.

Mutation Observer имеет следующие особенности:

  • Ожидание завершения всех задач сценария перед запуском, то есть асинхронно.
  • Инкапсулируйте запись изменения DOM в массив для обработки вместо обработки изменений DOM по одному.
  • То есть вы можете наблюдать за всеми изменениями, происходящими в DOM-узлах, либо можете наблюдать за определенным типом изменений

использовать

var observe = new MutationObserver(function(mutations, observer){
});
var el = document.querySelector('#app');
var  options = {
  'childList': true,
  'attributes':true
} ;
observer.observe(el, options);
// 创建并返回一个 MutationObserver 实例， 并侦听el元素的变动。

небольшой пример

Функция обратного вызова MutationObserver является асинхронной, и обратный вызов будет вызываться только после завершения всех операций DOM.

<div id='target' class='block' name='target'>
    target的第一个子节点
    <p>
       <span>target的后代</span>
    </p>
</div>



var target=document.getElementById('target');
var i=0
var observe=new MutationObserver(function (mutations,observe) {
    i++   
});
observe.observe(target,{ childList: true});
target.appendChild(docuemnt.createTextNode('1'));
target.appendChild(docuemnt.createTextNode('2'));
target.appendChild(docuemnt.createTextNode('3'));
console.log(i)  //1 callback的回调次数

заявление

Есть много ситуаций, когда MutationObserver API может пригодиться. Например:

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

совместимость

Глядя на комментарии, я больше обеспокоен совместимостью, и я опубликую это здесь. Вы также можете пойти на MDN для просмотра напрямую

Суммировать

  • Интерфейс MutationObserver предоставляет возможность отслеживать изменения, внесенные в дерево DOM. Он был разработан как замена старой функции Mutation Events, которая была частью спецификации DOM3 Events. (МДН)
  • DOM MutationObserver, который реагирует на изменения DOM, не влияя на производительность браузера.
  • Ожидание завершения всех задач сценария перед запуском, то есть асинхронно.
Категории