MutationObserver - массив измененных элементов
Здравствуйте. Есть такая задача:
При изменении 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. Подскажите пожалуйста, как можно получить нужный мне массив внутри функции |
mutation.addedNodes[0] - это берем только первый элемент
для вставки должно быть что-то типа obj.type = 'insert' obj.nodes = mutation.addedNodes и бегать в цикле нужно в mutation.addedNodes, а не в mutation.addedNodes[0] |
function observeChildNodes(where, fn) {
var config = {
childList: true,
subtree: true
};
var insert = {
type: "insert",
nodes: []
};
var remove = {
type: "remove",
nodes: []
};
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.addedNodes.length){
insert.nodes = insert.nodes.concat(mutation.addedNodes);
}
if(mutation.removedNodes.length){
remove.nodes = remove.nodes.concat(mutation.removedNodes);
}
});
if(remove.nodes.length)
fn(remove);
if(insert.nodes.length)
fn(insert);
});
observer.observe(where, config);
}
|
obj.nodes.push(...mutation.addedNodes); obj.nodes.push(...mutation.removedNodes); |
Благодарю всех, кто отозвался! Элементарное упустил как-то=)
Воспользовался вот этим вариантом, все работает как нужно: Цитата:
|
| Часовой пояс GMT +3, время: 12:46. |