Як використовувати MutationObserver API для зміни вузлів DOM

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

Після закінчення виклику вона повертається до екрану, бачить “збережені зміни!” вимикає комп'ютер і штурмує офіс.

Окрім моєї несприйнятливості до оповідання, з цього короткого сценарію ми помітили, яку неприємність завдало наполегливе повідомлення. Таким чином, у майбутньому ми вирішимо уникнути цього, коли це можливо, і скористаємося таким, який або спонукає користувача підтвердити, натиснувши його - або зникає самостійно. Використання другого для швидких повідомлень - гарна ідея.

Ми вже знаємо, як зробити елемент зникає з сторінки, так що це не повинно бути проблемою. Що ми повинні знати коли це з'явилося? Тому ми можемо змусити його зникнути після правдоподібного часу.

API MutationObserver

Загалом, коли елемент DOM (подібно до повідомлення div) або будь-які інші зміни вузлів, ми повинні знати це. Довгий час розробникам доводилося покладатися на хакі і фреймворки через відсутність рідного API. Але це змінилося.

Тепер у нас є MutationObserver (раніше Mutation Events). MutationObserver є нативним об'єктом JavaScript з набором властивостей і методів. Це дозволяє нам спостерігати за зміною на будь-якому вузлі як DOM Element, Document, Text тощо. Під мутацією ми маємо на увазі додавання або видалення вузла та зміни атрибута & даних вузла.

Подивимося приклад для кращого розуміння. Спочатку ми зробимо налаштування, де з'явиться повідомлення при натисканні кнопки, як той, що побачив Рита. Тоді ми створити і прив'язати спостерігача до цього вікна повідомлення і кодуйте логіку для автоматичного приховування повідомлення. Розсудливий?

Примітка: Ви можете в якийсь момент або вже попросили мене в голові “Чому б не приховати повідомлення з самої події, натиснувши кнопку в JavaScript?” У моєму прикладі я не працюю з сервером, тому, звичайно, клієнт несе відповідальність за те, щоб показати повідомлення і може занадто легко приховати його. Але, як і в інструменті редагування Rita, якщо сервер є тим, хто вирішує змінити вміст 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" div у нашому прикладі.

(function startObservation () var / * 1) Створіть об'єкт MutationObserver * / observer = new MutationObserver (функція (мутації) mutationObserverCallback (мутації);), / * 2) Створіть конфігураційний об'єкт * / config = childList: true; / * 3) Glue'em all * / observer.observe (msg, config); ) (); 

Нижче наведено список властивостей для config Об'єкт, що ідентифікує різні види мутацій. Оскільки в нашому прикладі ми маємо справу тільки з дочірнім текстовим вузлом, створеним для тексту повідомлення, ми використовували childList власності.

Спостерігаються види мутацій

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

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

Оскільки ми лише додаємо повідомлення до div, ми просто схопимо першу спостережувану мутацію і перевіримо, чи вставлений текстовий вузол. Якщо ми отримали більше, ніж одну зміну, ми можемо просто прокрутити мутації масив.

Кожна мутація в мутації масив представлений об'єктом Мутація запису з такими властивостями.

Властивості Мутація запису

І це все. ми просто повинні поставити код разом для останнього кроку.

Підтримка браузера

Довідка

• “W3C DOM4 Мутація спостерігача.” W3C. Web. 19 червня 2015 року
• “MutationObserver.” Мережа розробників Mozilla. Web. 19 червня 2015 року.