Mutations-Observer получить добавленный элемент - PullRequest
Новая
       25

Mutations-Observer получить добавленный элемент

1 голос
/ 24 сентября 2019

Я пытаюсь использовать mutationsobserver для регистрации только добавленных узлов.Вот что я получил до сих пор.Я не могу пройти эту часть.Я застрял.Я пытался получить счетчик индекса NodeList при его первом запуске и регистрировать только добавленные узлы, используя его, но в итоге не получилось.Я понятия не имею, как этого достичь.Честно говоря, я не знал о наблюдателе мутаций до сегодняшнего утра.

Вот мой текущий скрипт 

const targetNode = document.getElementById('team_log_actual');

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
    if (mutation.type === 'childList') {
        console.log('a node added.' + mutation.target);
        var html = mutation.target;
        var htmlstring = JSON.stringify(html);
        console.log(html)


    }
}
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

Каждый раз, когда добавляется новый.Я хотел бы привести в порядок только добавленный узел.

1 Ответ

1 голос
/ 25 сентября 2019

Вы можете использовать mutation.addedNodes, чтобы увидеть, какие узлы были добавлены к элементу.Если вы просто хотите напечатать innerHTML всех узлов, вы можете сделать что-то вроде: 

console.log( Array.from( mutation.addedNodes ).map( node => node.innerHTML ).join('\r\n') );

Это сначала преобразовало бы addedNodes (который имеет тип NodeList) в массив, а затемКарта будет извлекать innerHTML для каждого узла.Затем вы можете объединить его и распечатать изменения.

Ниже код будет имитировать это поведение.

Для конфигурации вам не нужно проверять атрибуты или поддерево, childList будетделать то, что вы хотите сделать 

const targetNode = document.getElementById('team_log_actual');

// Options for the observer (which mutations to observe)
const config = {
  attributes: false,
  childList: true,
  subtree: false
};

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log( Array.from( mutation.addedNodes ).map( node => node.innerHTML ).join('\r\n') );
    }
  }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

let counter = 0;
setInterval(function() {
  var span = document.createElement('span');
  span.innerHTML = 'I am element ' + (++counter);
  targetNode.appendChild(span);
}, 1000);
<div id="team_log_actual"></div>
...