Как я могу контролировать DOM на предмет изменений?
Есть ли способ - с помощью jQuery или иным образом - отслеживать DOM на предмет вставок, удалений, обновлений стилей и т. Д.?
4 ответа
См. Элементы "MutationEvent" здесь: https://developer.mozilla.org/en/DOM/DOM_event_reference но они устарели.
В jQuery теперь есть способ прикрепления событий к существующим и будущим элементам, соответствующим селектору: http://docs.jquery.com/Events/live
Это может быть уловка, которую вы могли бы использовать из-за отсутствия правильной информации модификации узла DOM.
Смотрите библиотеку мутаций. Он построен поверх нового браузера API под названием DOM Mutation Observers.
Я недавно написал плагин, который делает именно это - 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 с зависимостями, как описано на странице readme.
Это только для целей отладки:
Firebug в настоящее время позволяет устанавливать точки останова на узлах HTML.
Вы должны открыть HTML-инспектор, щелкнуть правой кнопкой мыши по узлу, и у вас есть следующие опции:
- Прерывание при изменении атрибута
- Прерывание по добавлению / удалению ребенка
- Прерывание при удалении
Как только вы достигнете точки останова, вы также можете просмотреть стек вызовов.
Google Chrome также имеет аналогичную функцию.