Задать вопрос
rtutin
@rtutin
Быдлокодер, анархист, аутист

Есть ли в JS событие изменения DOM или конкретного элемента DOM?

Хотелось бы знать, изменилась страница или нет, если таки изменилась - выполнить действие. Может это как-то реализовано в какой-либо библиотеке?
  • Вопрос задан
  • 5515 просмотров
Подписаться 2 Оценить Комментировать
Решения вопроса 2
mlnkv
@mlnkv
JavaScript Developer
https://developer.mozilla.org/ru/docs/Web/API/Muta...

// выбираем нужный элемент
var target = document.querySelector('#some-id');
 
// создаем новый экземпляр наблюдателя
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// создаем конфигурации для наблюдателя
var config = { attributes: true, childList: true, characterData: true };
 
// запускаем механизм наблюдения
observer.observe(target,  config);
 
// позже, если надо, прекращаем наблюдение
observer.disconnect();
Ответ написан
Комментировать
@komandakycto
php программист
Если используете jquery, то это событие change, если не используете, то не беда, на чистом js тоже есть события. Наберите в гугле javascript events
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@GoodBoy123
Всё зависит от версии IE которую нужно поддерживать.
IE 11+ - MutationObserver ( https://developer.mozilla.org/ru/docs/Web/API/Muta... )
IE 9+ - MutationEvent ( https://developer.mozilla.org/en-US/docs/Web/API/M... ) сильно влияют на производительность.

Можете попробовать React.js ( facebook.github.io/react ) у него не плохо всё контролируется за счет Virtual DOM.
Ответ написан
@artemsites
Разрабатываю и развиваю сайты с партнёрами
Дополнение к Сергей Мельников;
// выбираем нужный элемент
var target = document.querySelector("#some-id");

// создаем новый экземпляр наблюдателя
var observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    // Проверяем какой тип изменений
    console.log(mutation.type);
    // Если потомки #some-id изменились
    if (mutation.type === "childList") {
      console.log('Делаем обработку обновлённого DOM внутри #some-id')
    }
  });
});

// создаем конфигурации для наблюдателя
var config = { attributes: true, childList: true, characterData: true };

// запускаем механизм наблюдения
observer.observe(target, config);

// позже, если надо, прекращаем наблюдение
// observer.disconnect();
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы