Отслеживание изменения элемента блока DIV и отправка POST

Question

Уважаемые, подскажите реально ли реализовать такую штуковину. Имеется блок DIV с временным интервалом Выглядит он следующим образом:

<div data-interval="12_12_2021_17" class="int intFull "><div>17-18</div></div>

Возможно ли каким то образом отследить изменение Класса Допустим в первые 5 минут часа этот class меняется Становится он такого вида:

<div data-interval="12_12_2021_17" class="int intAvailable "><div>17-18<span style="color: #b202b4;">(6)</span></div></div>

Возможно ли как то каждую секунду отслеживать этот класс, и как только класс становится class="int intAvailable Отправлять POST на сервер /home/server/time c данными date=12_12_2021_17 Причем нужно как то это сделать что бы не обновлялась страница, так как скрипт планируется запускать из под консоли браузера... Благодарен за любую помощь!

Answer 1

Можно отслеживать при помощи MutationObserver

var target = document.querySelector('.intFull');

// Конфигурация observer (за какими изменениями наблюдать)
const config = {
    attributes: true
};

// Колбэк-функция при срабатывании мутации
const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        if (mutation.type === 'attributes') {
            console.log('Атрибут "' + mutation.attributeName + '" был изменен. На "' + target.getAttribute('class') + '"');
            post();//Отправляем POST запрос     
            observer.disconnect();// остановить наблюдение
        }
    }
};

// Создаём экземпляр наблюдателя с указанной функцией колбэка
const observer = new MutationObserver(callback);

// Начинаем наблюдение за настроенными изменениями целевого элемента
observer.observe(target, config);

//Изменяем класс через 1 секунду
setTimeout(()=>{
  target.setAttribute('class', 'int intAvailable')
},1000);


function post(){
  fetch('/home/server/time', {
    method: 'POST',
    headers: {
      'Content-Type': 'text/plain;charset=utf-8'
      //'Content-Type': 'application/json;charset=utf-8'
    },
    body: target.getAttribute('data-interval')
    //body: JSON.stringify(user)
  }).then(data=>{
      data.text().then(function (text) {
        console.log(text)
      });
      //data.json().then(function (json) {
        //console.log(json)
      //});
  });      
}

<div data-interval="12_12_2021_17" class="int intFull "><div>17-18</div></div>

БЛОГ НА HUSL

Отслеживание изменения элемента блока DIV и отправка POST

Ответы (1 шт):