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

Question

[Лев Ртутин]

Хотелось бы знать, изменилась страница или нет, если таки изменилась - выполнить действие. Может это как-то реализовано в какой-либо библиотеке?

Answer 1

[Сергей Мельников]

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();

Answer 2

[Леонид Корсаков]

Если используете jquery, то это событие change, если не используете, то не беда, на чистом js тоже есть события. Наберите в гугле javascript events

Answer 3

[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.

Comments

[Лев Ртутин]

>IE которую нужно поддерживать
Слава Богу(которого нет), что не нужно.

Answer 4

[Артём Кузнецов]

Дополнение к Сергей Мельников;

// выбираем нужный элемент
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();