Здравствуйте. Есть такая задача:
При изменении DOM дерева нужно вызывать функцию, в качестве аргумента которой, необходимо передать объект.
Объект должен содержать два поля:
Первое поле – строка, insert или remove в зависимости от того, что произошло с дом деревом, удалились ли из него элементы или добавились.
А второе поле, должно содержать массив удаленных или добавленных элементов и вот тут у меня затык. Если элемент был добавлен один, то у меня все выходит вот так
function observeChildNodes(where, fn) {
var config = {
childList: true,
attributes: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
};
var obj = {
type: ""
,nodes: []
};
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
obj.nodes = [];
if(mutation.addedNodes.length > 0){
obj.type = "insert";
obj.nodes.push(mutation.addedNodes[0]);
}
if(mutation.removedNodes.length > 0){
obj.type = "remove";
obj.nodes.push(mutation.removedNodes[0]);
}
});
fn(obj);
});
observer.observe(where, config);
}
Но если добавлено или удалено несколько элементов, то не работает. Пробовал бегать в цикле по mutation.addedNodes[0] и mutation.removedNodes[0], но там масса информации, а не конкретные элементы.
Все это необходимо реализовать через MutationObserver.
Подскажите пожалуйста, как можно получить нужный мне массив внутри функции