Вопрос по функционированию 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/
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости