Замена событий мутации DOM

Question

Поскольку мутация DOM помечена как устаревшая в w3c (см. http://www.w3.org/TR/DOM-Level-3-Events/), существует ли (быстрый) альтернативный способ обнаружения модификации атрибута в ДОМ?

Answer 1

Насколько я знаю, нет альтернативы (пока), поэтому вы застряли с DOMAttrModified который поддерживается только в Firefox и Opera. В IE у вас есть onpropertychanged событие, но нет никакого способа получить подобную функциональность в Chrome / Safari. Есть несколько вещей, которые вы можете сделать в зависимости от того, что вы пытаетесь выполнить, и браузеров, на которые вы ориентируетесь:

• определите методы получения и установки для атрибутов, которые вы хотите отслеживать
• переопределить методы, такие как document.createAttribute, attributes.setNamedItem...

Я сам работал над кросс-браузерным решением, но без особого успеха. Вы должны держаться подальше от событий мутации все вместе, так как они не кросс-браузерные и очень медленные. Есть веские причины, почему они устарели. Если вы хотите узнать больше, прочитайте это:

• http://www.w3.org/2008/webapps/wiki/MutationReplacement
• http://www.quirksmode.org/dom/events/ > События W3C
• http://robertnyman.com/javascript/javascript-getters-setters.html

Answer 2

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

Замена - " Наблюдатели мутаций", посмотрите http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers и https://developer.mozilla.org/en/DOM/DOM_Mutation_Observers

Информация о мутациях доставляется наблюдателям в виде упорядоченной последовательности MutationRecords, представляющей наблюдаемую последовательность произошедших изменений

Пример использования:

    var observer = new MutationObserver(function(mutationRecords) {
    // Handle mutations
     });

    observer.observe(myNode,
     {  // options:
     subtree: true,  // observe the subtree rooted at myNode
     childList: true,  // include information childNode insertion/removals
     attribute: true  // include information about changes to attributes within the subtree
    });

Это поддерживается в ночных сборках Chrome 18 и Firefox и Webkit. Firefox 14 также будет поддерживать эту функцию.

Answer 3

Отличная замена устаревшим событиям DOM* animationStart в сочетании с анимацией CSS. Дэвид Уолш пишет о методе.

Сначала настройте ключевые кадры и примените их к элементам, которые вы хотите прослушать (не забудьте префиксы вендора!):

@keyframes nodeInserted {  
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); }  
}

#parentElement > li {
  animation-duration: 0.001s;
  animation-name: nodeInserted;
}

Затем добавьте слушателя:

var insertListener = function(event){
  if (event.animationName == "nodeInserted") {
    // This is the debug for knowing our listener worked!
    // event.target is the new node!
    console.warn("Another node has been inserted! ", event, event.target);
  }
}
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari

Та-да! Вот демо Дэвида. Он прекрасно работает для меня с расширением Chrome, которое добавляет картинки Facebook в Google Voice (см. Content.css и injected.js).

Answer 4

Год спустя появились новые и блестящие Mutation Observers из DOM Level 4 (перейдите по ссылкам, они многое объясняют!). Где Mutation Event выстрелил тысячу раз, MutationObserver срабатывает только один раз со всеми модификациями, содержащимися и доступными.

Работы для (по состоянию на 2017/03):

• Firefox 14+
• IE 11
• край
• Опера 15+
• Chrome 26+ (с 18 до 25 с префиксом, window.WebKitMutationObserver)
• Safari 6.0 (с префиксом, window.WebKitMutationObserver)