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

    Як використовувати 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 власності.

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

    Нерухомість Коли встановлено значення вірно
    childList Спостерігається вставка і видалення дочірніх вузлів цілі.
    атрибути Спостерігаються зміни атрибутів цілі.
    Характеристика даних Спостерігаються зміни даних цілі.

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

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

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

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

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

    Нерухомість Повернення
    addedNodes Додано порожній масив або масив вузлів.
    attributeName Null або ім'я атрибута, який було додано, видалено або змінено.
    attributeNamespace Null або простору назв атрибута, який було додано, видалено або змінено.
    наступнийСибл Null або наступний брат вузла, який було додано або видалено.
    oldValue Null або попереднє значення атрибута або даних змінено.
    previousSibling Null або попередній брат вузла, який було додано або видалено.
    removeNodes Порожній масив або масив вузлів, які видалено.
    мету Вузол, націлений на MutationObserver
    тип Тип мутації спостерігається.

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

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

    ІМІДЖ: Чи можу я використовувати.Веб. 19 червня 2015 року

    Довідка

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