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

Есть ли способ - с помощью jQuery или иначе - для мониторинга DOM для вставки, удаления, обновления стилей и т.д.

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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

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

У Google Chrome есть аналогичная функция.

Ответ 4

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

Вы используете его так же, как .each function

$(".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 с зависимостями, как описано на странице readme.