Как использовать API MutationObserver для изменений узла DOM

Вот сценарий: Рита, автор журнала, редактирует свою статью онлайн. Она сохраняет свои изменения и видит сообщение “Изменения сохранены!” Именно тогда она замечает опечатку, которую пропустила. Она исправляет это и собирается нажать “спасти”, когда она получает злой телефонный звонок от своего босса.

После завершения звонка она возвращается к экрану, видит “Изменения сохранены!” выключает компьютер и вылетает из офиса.

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

Мы уже знаем, как заставить элемент исчезнуть со страницы, так что это не должно быть проблемой. Что нам нужно знать, так это когда это появилось? Таким образом, мы можем заставить его исчезнуть через правдоподобное время.

MutationObserver API

В целом, когда элемент DOM (как сообщение ДИВ) или любые другие изменения узла, мы должны знать об этом. Долгое время разработчикам приходилось полагаться на хаки и фреймворки из-за отсутствия нативного API. Но это изменилось.

Теперь у нас есть MutationObserver (ранее События Мутации). MutationObserver является нативным объектом JavaScript с набором свойств и методов. Это позволяет нам наблюдать за изменениями на любом узле как элемент DOM, документ, текст и т. д. Под мутацией мы имеем в виду добавление или удаление узла и изменение атрибута и данных узла.

Давайте посмотрим на пример для лучшего понимания. Сначала мы сделаем настройку, в которой после нажатия кнопки появится сообщение, подобное тому, которое увидела Рита. Тогда мы будем создать и связать наблюдателя мутации с этим окном сообщения а также код логики для автоматического скрытия сообщения. смекалка?

Заметка: Вы можете в какой-то момент или уже спросили меня в своей голове “Почему бы просто не скрыть сообщение изнутри самого события нажатия кнопки в JavaScript?” В моем примере я не работаю с сервером, поэтому, конечно, клиент отвечает за показ сообщения и может слишком легко его скрыть. Но, как и в инструменте редактирования Риты, если сервер решает изменить содержимое DOM, клиент может только оставаться начеку и ждать.

Сначала мы создаем настройки, чтобы показать сообщение при нажатии кнопки.

 Показать сообщение

var msg = document.querySelector ('# msg'), SUCCESSMSG = "Изменения сохранены!"; / * Добавить событие нажатия кнопки * / document .querySelector ('button') .addEventListener ('click', showMsg); function showMsg () msg.textContent = SUCCESSMSG; msg.style.background = 'teal';  

Как только мы запустили начальную настройку, давайте сделаем следующее;

• Создать MutationObserver объект с пользовательской функцией обратного вызова (функция будет определена позже в посте). Функция будет выполняться для каждой мутации, наблюдаемой MutationObserver.
• Создайте объект конфигурации, чтобы указать вид мутаций, наблюдаемых MutationObserver.
• Привязать MutationObserver к цели, которая является «MSG» ДИВ в нашем примере.

(function startObservation () var / * 1) Создать объект MutationObserver * / наблюдатель = новый MutationObserver (функция (мутации) mutationObserverCallback (мутации);), / * 2) Создать объект конфигурации * / config = childList: правда; / * 3) склеить их все * / Observer.observe (msg, config); ) (); 

Ниже приведен список свойств для конфиг объект, идентифицирующий различные виды мутаций. Поскольку в нашем примере мы имеем дело только с дочерним текстовым узлом, созданным для текста сообщения, мы использовали childList имущество.

Виды наблюдаемых мутаций

Теперь к той функции обратного вызова, которая выполняется при каждой наблюдаемой мутации.

function mutationObserverCallback (mutations) / * Получить первую мутацию * / var mutationRecord = mutations [0]; / * Если был добавлен дочерний узел, скрыть сообщение через 2 с * / if (mutationRecord.addedNodes [0]! == undefined) setTimeout (hideMsg, 2000);  function hideMsg () msg.textContent = "; msg.style.background = 'none'; 

Поскольку мы только добавляем сообщение в ДИВ, мы просто возьмем первую наблюдаемую мутацию и проверим, был ли вставлен текстовый узел. Если мы получили более одного изменения, мы можем просто перебрать мутации массив.

Каждая мутация в мутации массив представлен объектом MutationRecord со следующими свойствами.

Свойства MutationRecord

И это все. мы просто должны собрать код для последнего шага.

Поддержка браузера

Ссылка

• “W3C DOM4 Mutation Observer.” W3C. Web. 19 июня 2015 г.
• “MutationObserver.” Сеть разработчиков Mozilla. Web. 19 июня 2015 г..