Как я могу контролировать DOM на предмет изменений?

Question

Есть ли способ - с помощью jQuery или иным образом - отслеживать DOM на предмет вставок, удалений, обновлений стилей и т. Д.?

Answer 1

Смотрите элементы "MutationEvent" здесь: https://developer.mozilla.org/en/DOM/DOM_event_reference но они устарели.

В jQuery теперь есть способ прикрепления событий к существующим элементам AND, соответствующим селектору: http://docs.jquery.com/Events/live#typefn

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

Answer 2

Я недавно написал плагин, который делает именно это - jquery.initialize

Вы используете его так же, как .each функция

$(".some-element").initialize( function(){
    $(this).css("color", "blue"); 
});

Отличие от .each состоит в том, что он берет ваш селектор, в данном случае .some-element и ждет новых элементов с этим селектором в будущем, если такой элемент будет добавлен, он также будет инициализирован.

В нашем случае функция инициализации просто меняет цвет элемента на синий. Так что, если мы добавим новый элемент (неважно, с ajax или даже инспектором F12 или чем-то еще), например:

$("<div/>").addClass('some-element').appendTo("body"); //new element will have blue color!

Плагин начнет его немедленно. Также плагин гарантирует, что один элемент инициализируется только один раз. Поэтому, если вы добавите элемент, .deatch() из тела и добавите его снова, он не будет инициализирован снова.

$("<div/>").addClass('some-element').appendTo("body").detach()
    .appendTo(".some-container");
//initialized only once

Плагин основан на MutationObserver - он будет работать на IE9 и 10 с зависимостями, как описано на странице чтения .

Answer 3

Это только для целей отладки:

Firebug в настоящее время позволяет устанавливать точки останова на html-узлах.

Вы должны открыть инспектор html, щелкнуть правой кнопкой мыши по узлу и у вас есть следующие опции:

• Прерывание при изменении атрибута
• Прерывание при добавлении / удалении дочернего элемента
• Прерывание при удалении

Как только вы достигнете точки останова, вы также можете просмотреть стек вызовов.

Google Chrome также имеет аналогичную функцию.

Answer 4

См. Библиотеку mutation-summary . Он построен поверх нового браузера API под названием DOM Mutation Observers.