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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

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

var msg = document.querySelector (‘# msg’),
SUCCESSMSG = “Изменения сохранены!”;

/ * Добавить событие нажатия кнопки * /
документ
.querySelector ( ‘кнопка’)
.addEventListener (‘click’, showMsg);

function showMsg () {
msg.textContent = SUCCESSMSG;
msg.style.background = ‘teal’;
}

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

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

(функция startObservation () {
  вар
    / * 1) Создать объект MutationObserver * /
    наблюдатель = новый MutationObserver (
      функция (мутации) {
      mutationObserverCallback (мутации);
    }),
    / * 2) Создать объект конфигурации * /
    config = {childList: true};

/ * 3) склеить все * /
наблюдатель.обсервис (msg, config);
}) ();

Ниже приведен список свойств для объекта конфигурации, идентифицирующий различные виды мутаций. Поскольку в нашем примере мы имеем дело только с дочерним текстовым узлом, созданным для текста сообщения, мы использовали свойство childList.
Виды наблюдаемых мутаций
Имущество
Когда установлено в true
childList
Наблюдаются вставка и удаление дочерних узлов цели.
атрибуты
Изменения в атрибутах цели не наблюдается.
CharacterData
Изменения в данных цели не наблюдается.
Теперь к той функции обратного вызова, которая выполняется при каждой наблюдаемой мутации.
function mutationObserverCallback (mutations) {
  / * Захватить первую мутацию * /
  var mutationRecord = мутации[0];
  / * Если был добавлен дочерний узел,
     скрыть сообщение через 2 с * /
  if (mutationRecord.addedNodes[0] ! == не определено)
    setTimeout (hideMsg, 2000);
}
function hideMsg () {
  msg.textContent = ”;
  msg.style.background = ‘none’;
}

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

Каждая мутация в массиве мутаций представлена объектом MutationRecord со следующими свойствами.
Свойства MutationRecord
Имущество
Возвращает
addedNodes
Добавлен пустой массив или массив узлов.
имя атрибута
Нуль или имя атрибута, который был добавлен, удален или изменен.
attributeNamespace
Нуль или пространство имен атрибута, который был добавлен, удален или изменен.
NextSibling
Нуль или следующий родственный узел узла, который был добавлен или удален.
OldValue
Нулевое или предыдущее значение атрибута или данных изменено.
PreviousSibling
Нулевой или предыдущий элемент узла, который был добавлен или удален.
removedNodes
Пустой массив или массив удаленных узлов.
цель
Узел, на который нацелен MutationObserver
тип
Тип мутации наблюдается.
И это все. мы просто должны собрать код для последнего шага.