Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.09.2018, 15:32
Аспирант
Отправить личное сообщение для Tipylja Посмотреть профиль Найти все сообщения от Tipylja
 
Регистрация: 17.04.2017
Сообщений: 60

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.
Подскажите пожалуйста, как можно получить нужный мне массив внутри функции
Ответить с цитированием
  #2 (permalink)  
Старый 14.09.2018, 15:43
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 373

mutation.addedNodes[0] - это берем только первый элемент

для вставки должно быть что-то типа

obj.type = 'insert'
obj.nodes = mutation.addedNodes


и бегать в цикле нужно в mutation.addedNodes, а не в mutation.addedNodes[0]
Ответить с цитированием
  #3 (permalink)  
Старый 14.09.2018, 15:52
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,412

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);
}
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 14.09.2018, 15:59
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,624

obj.nodes.push(...mutation.addedNodes);
obj.nodes.push(...mutation.removedNodes);
Ответить с цитированием
  #5 (permalink)  
Старый 14.09.2018, 19:06
Аспирант
Отправить личное сообщение для Tipylja Посмотреть профиль Найти все сообщения от Tipylja
 
Регистрация: 17.04.2017
Сообщений: 60

Благодарю всех, кто отозвался! Элементарное упустил как-то=)

Воспользовался вот этим вариантом, все работает как нужно:
Сообщение от j0hnik Посмотреть сообщение
obj.nodes.push(...mutation.addedNodes);
obj.nodes.push(...mutation.removedNodes);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помещение элементов в массив из объекта gazman Общие вопросы Javascript 16 02.04.2016 23:44
Массив из элементов другого массива, взятых в случайном порядке Basil_JS Общие вопросы Javascript 6 12.04.2015 13:07
Получить массив без повторяющихся элементов truten Общие вопросы Javascript 5 15.12.2013 18:35
Удалить и вернуть массив из удаленных элементов splice Paulyyy Общие вопросы Javascript 15 29.05.2013 14:36
Упорядочить заданный числовой массив X (M) в порядке убывания значений его элементов. Drimmer Серверные языки и технологии 0 02.07.2012 17:22