MutationObserver обнаруживает появление элемента и изменение значения элемента - PullRequest
Новая
       34

MutationObserver обнаруживает появление элемента и изменение значения элемента

0 голосов
/ 21 марта 2019

Я намерен использовать MutationObserver для наблюдения за появлением и изменением значения элемента, но, если честно, я не уверен, как это должно быть реализовано.

Цель MO будет div.player-bar, и я пытаюсь определить, когда на странице появляется el-badge__content и когда изменяется значение элемента el-badge__content (например, вместо 1 изменится на 2).

Обратите внимание, что el-badge__content появляется одновременно с созданием div.new-bar, и много раз div.new-bar не будет присутствовать на странице, поэтому мне нужно слушать div.player-bar.

Возможно ли это? До сих пор я думал о чем-то вроде этого: 

var target = document.getElementsByClassName('player-bar')[0];
var config = { attributes: true, childList: true, subtree: true };

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    mutation.forEach(function(addedNode) {
      var e = addedNode.document.getElementsByClassName('el-badge__content')[0];
      if (e) {
        console.log("Element appearance/changed")
      };
    });
  });
});

observer.observe(target, config);

Заранее спасибо.

1 Ответ

0 голосов
/ 21 марта 2019

mutation - это объект MutationRecord , который содержит массив, подобный массиву addedNodes NodeList, который вы пропустили в своем коде, но это не массив, поэтому он не имеет forEach. Вы можете использовать ES6 для перечисления в современных браузерах или просто для цикла или вызвать forEach.call.

Гораздо более простым решением для этого конкретного случая является использование динамически обновляемой динамической коллекции, возвращаемой getElementsByClassName, поскольку она сверхбыстрая, обычно намного быстрее, чем перечисление всех записей мутаций и всех их добавленных узлов внутри. 

const target = document.querySelector('.player-bar');
// this is a live collection - when the node is added the [0] element will be defined
const badges = target.getElementsByClassName('el-badge__content');
let prevBadge, prevBadgeText;

const mo = new MutationObserver(() => {
  const badge = badges[0];
  if (badge && (
      //  the element was added/replaced entirely
      badge !== prevBadge ||
      // or just its internal text node
      badge.textContent !== prevBadgeText
  )) {
    prevBadge = badge;
    prevBadgeText = badge.textContent;
    doSomething();
  }
});
mo.observe(target, {subtree: true, childList: true});

function doSomething() {
  const badge = badges[0];
  console.log(badge, badge.textContent);
}

Как видите, второй наблюдатель добавлен к самому элементу значка. После удаления элемента значка сборщик мусора автоматически удалит наблюдателя.

...