Можно ли определить что элемент HTML страницы подвергался изменению со стороны JS?

#javascript #html #css

Можно ли определить что элемент HTML страницы подвергался изменению со стороны JS
после загрузки страницы? Например что-то такое:


  
Привет
  


    

Ответы

Ответ 1

Можно попробовать использовать DOM MutationObserver. Пример, данный код выводит в
консоль, тип изменения произведенного над элементом для примера сделал смену класса,
и изменение цвета текста через 2с:



// выбираем элемент
var target = document.querySelector('#some-id');

// создаем экземпляр наблюдателя
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.target);
    console.log("Тип: " + mutation.type);
    console.log("Что меняется: " + mutation.attributeName);

  });
});

// настраиваем наблюдатель
var config = {
  attributes: true,
  childList: true,
  characterData: true
}

// передаем элемент и настройки в наблюдатель
observer.observe(target, config);

// добавляем класс и меняем  цвет 
$("#some-id").addClass("test")
// меняем  цвет через 2 c
setTimeout(function() {
  $("#some-id").css("color","red")
},2000);


  Что-то





Подробнее почитать можно здесь