突变观察者事件新值

Question

我正在学习使用突变观察者 class，主要在这里： https://javascript.info/mutation-observer

我知道如何监听属性的变化，以及如何使用attributeOldValue 获取旧的属性值。 但是我可以从同一个事件中获取新的属性值吗？ 如果是这样，怎么做？ 谢谢

Answer 1

您可以直接从更改后的 object 中简单地查询当前值。

// is element is an input
const newValue = document.getElementByID('myElement').value;


// or, if it is a any text element
const newValue = document.getElementByID('myElement').innerHTML;

此外，每个MutationRecord都有一个名为target的属性，其中包含有关更改的 object 的所有详细信息。 因此，根据MutationRecord.type （它告诉我们发生了哪种类型的更改），您可以从MutationRecord.target中的相应属性中获取新值

Answer 2

我们可以监听突变并从已经发生的目标中获取内容。 （示例不在你的主题，但原理类似）

   document.addEventListener('DOMContentLoaded', function () {
  let targetEl = document.querySelector('body');

  function checkChange(mutations, observer) {
     //****************************
     console.log(mutations[0].target.innerHTML);
     //****************************
  }

  let observer = new MutationObserver(checkChange);

  observer.observe(targetEl, {
     subtree: true,
     childList: true,
     characterData: true,
     characterDataOldValue: true,
  })

})