Почему не работает MutationObserver?

Question

JS

let observer = new MutationObserver(elements => {
  for(let elem of elements){
    if(elem.tagName == 'P'){
      elem.style.backgroundColor = 'red';
    }
  }
});
let div = document.querySelector('#test');
observer.observe(div, {
  childList:true,
  subtree: true
});
let p = document.createElement('p');
p.innerHTML = 'wewew';
div.append(p);

HTML

<!DOCTYPE html>
<html>
  <body>
    <div id='test'></div>
  </body>
</html>

Answer 1

let observer = new MutationObserver(elements => {

  for(let elem of elements){
    if(elem.target.tagName == 'P'){
      elem.target.style.backgroundColor = 'red';
    }
  }
});
let div = document.querySelector('#test');
observer.observe(div, {
  childList:true,
  subtree: true
});
let p = document.createElement('p');

div.append(p);
p.innerHTML = 'wewew';

Тут два изменения. Присвоение innerHTML после append иначе мутейшен срабатывает только на div. В elem у вас на самом деле не элемнет dom, а MutationRecord.

MutationRecord содержит иформацию о конкретном изменении DOM, у ней есть свойство target которое ссылается на изменившийся элемент.

БЛОГ НА HUSL

Почему не работает MutationObserver?

Ответы (1 шт):