MutationObserver в IE11 - получить данные до мутации

272
30 сентября 2017, 23:59

Вопрос по функционированию MutationObserver в IE. Как обычно в Chrome - работает отлично, в IE какие-то причуды. Проблема в коллбэке. Первый момент - mutations, в Хроме при изменении содержимого узла в mutations содержится 1 запись где заполнены addedNodes и removedNodes, в IE - 2 записи (Эта проблема достаточно просто решается). Второй момент - в IE нет данных о предыдущем состоянии ноды - вот это проблема. Как получить содержимое ноды (в IE) до изменений?

function callback(mutations, observer) {
  var textBefore = null;
  var textAfter = null;
  record = mutations.pop();
  textBefore = getRemovedText(record);
  textAfter = getAddedText(record);
  console.log("old=" + textBefore + " new=" + textAfter);
  if (textBefore != textAfter) {
    var classAttr = record.target.parentNode.attributes.getNamedItem("class");
    classAttr.value += " clean";
    record.target.parentNode.attributes.setNamedItem(classAttr);
    setTimeout(function() {
      classAttr.value = classAttr.value.replace(" clean", "");
      //record.target.parentNode.attributes.setNamedItem(classAttr);
    }, 1000);
  }
};

Установка подписки:

//setup observers
var targetObject = document.getElementsByClassName("observeChild");
for (var i = 0; i < targetObject.length; i++) {
  var observerObject = new MutationObserver(callback);
  var observable = targetObject.item(i);
  observerObject.observe(observable, {
    subtree: true,
    childList: true,
  });
}
//helper Code; 
function getRemovedText(record) {
  return record.removedNodes.item(0) == null ? null : record.removedNodes.item(0).textContent;
};
function getAddedText(record) {
  return record.addedNodes.item(0) == null ? null : record.addedNodes.item(0).textContent;
};

Вспомогательный код:

//random data changes
setInterval(function() {
  var elements = document.getElementsByClassName("observeChild");
  for (var i = 0; i < elements.length; i++) {
    if (Math.random() > .5) {
      elements.item(i).innerHTML = Math.random();
    } else {
      elements.item(i).innerHTML = elements.item(i).innerHTML + ""; //fake update
    }
  }
}, 2000);

https://jsfiddle.net/bp7yad61/2/

READ ALSO
Как узнать по API есть ли аватар в вк и в facebook у пользователя?

Как узнать по API есть ли аватар в вк и в facebook у пользователя?

Как узнать по API есть ли аватар в вк и в facebook у пользователя или нет?

244
txt преобразовать в массив с объектами

txt преобразовать в массив с объектами

Добрый вечер! Очень нужна помощьЕсть файл txt http://www

220