Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.05.2014, 15:57
Новичок на форуме
Отправить личное сообщение для denysdovhan Посмотреть профиль Найти все сообщения от denysdovhan
 
Регистрация: 24.05.2014
Сообщений: 3

Изменение состояния DOM
Постараюсь изложить задачу кратко.
Искал на здесь на форуме решение, перелопатил стековерфлов, но того что нужно не нашел.

Подскажите как можно отслеживать изменения в DOM (добавление новых элементов, присвоение класов, изменение атрибутов и т.д.).
В процессе поиска нашел события DOMMutationEvents, но вместе с ними полно жалоб на поддержку в браузерах.
Пробовал решить задачу с помощью костыля: периодически проверять количество нодов в документе, но так нельзя проверить изменение атрибутов.

Приведите пожалуйста пример скрипта, который будет кросбраузерным, будет проверять изменения в DOM. Желательно реальный работающий пример без костылей
Буду благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 24.05.2014, 16:09
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,583

Так вам кроссбраузероно или без костылей?)
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 24.05.2014, 19:08
Новичок на форуме
Отправить личное сообщение для denysdovhan Посмотреть профиль Найти все сообщения от denysdovhan
 
Регистрация: 24.05.2014
Сообщений: 3

На ваше усмотрение. Из двух зол выбирайте меньше. Главное чтобы работало)
Ответить с цитированием
  #4 (permalink)  
Старый 24.05.2014, 20:03
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,583

MutationObserver
<body>
<div type="button" onclick="this.innerHTML='<span>clicked</span>'">click</div>
<script>// select the target node
var target = document.querySelector('body');
 
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.type+'\n'+[].join.call(mutation.addedNodes,','));
  });    
});
 
// configuration of the observer:
var config = { attributes: true, childList: true, subtree: true };
 
// pass in the target node, as well as the observer options
observer.observe(target, config);
 
// later, you can stop observing
//observer.disconnect();
</script>
</body>


А для старых ie придётся танцевать с бубном. В интернете гулится вроде всякое на эту тему.

На самом деле необходимости в подобных вещах при нормальной разработке нет. Вообще нет. Если какая-то функция что-то меняет в dom - вам надо просто следить за этой функцией, а не последствиями.
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2014, 01:01
Новичок на форуме
Отправить личное сообщение для denysdovhan Посмотреть профиль Найти все сообщения от denysdovhan
 
Регистрация: 24.05.2014
Сообщений: 3

Задача в тому, что сторонние скрипты изменяют DOM, а мой скрип должен следить за этими изменениями и реагировать некими действиями.
Ответить с цитированием
  #6 (permalink)  
Старый 26.05.2014, 13:22
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Можно проверять на изменение innerHTML.
Ответить с цитированием
  #7 (permalink)  
Старый 26.05.2014, 19:33
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,583

Вообще правильный подход: проанализировать подключаемые скрипты, и подменять конкретные функции.
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 27.05.2014, 10:00
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

Сдается мне, такой скрипт должен будет через интервалы, причем очень краткие, каждый раз "гулять" по всем нодам , вести реестр аттрибутов и значений и сравнивать текущее с реестром.
И сдается мне будет экстремально тормозным на реальных страницах с контентом.

Это жесть. Проще написать функцию которая будет "оповещать" об вставке в dom нового объекта или изменении аттрибута. Но тогда ее надо будет воткнуть во все скрипты после всех строк которые меняют dom, отчего вероятно они распухнут как винни пух
Ответить с цитированием
  #9 (permalink)  
Старый 27.05.2014, 11:34
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от denysdovhan
адача в тому, что сторонние скрипты изменяют DOM
почитать апи стороннего скрипта (если оно есть)
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #10 (permalink)  
Старый 27.05.2014, 11:39
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,583

krasovsky,
да нет, можно просто подменить (HTML)Element.prototype.appendChild итд.=)
Но не нужно конечно.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение состояния нескольких кнопок llelikys Общие вопросы Javascript 8 20.02.2014 15:45
DOM создание объекта JQ ~ вопрос реализации состояния Brook Events/DOM/Window 0 21.01.2014 22:45
DOM изменение andrey-kun02 Учебные материалы 2 05.06.2013 12:30
Повесить событие на изменение DOM nebaz Events/DOM/Window 5 17.06.2012 15:15
Изменение параметра "ALT"("TITLE") тега IMG посредством DOM Гость Элементы интерфейса 3 21.02.2008 10:02