Javascript MutationObserver：如何突出显示已编辑的 DOM 元素？

Question

我正在尝试检测 <li> 的值何时更改，然后通过添加背景颜色将 class 添加到 li。

我有这个开关：

mutationList.forEach((mutation) => {
  switch(mutation.type) {
    case 'childList':
    $(this).css('background-color','red');
      console.log('childlist edited');
      break;
    case 'attributes':
      console.log('attr edited')
      break;
  }
});

但是颜色没有添加到背景中。然而，我收到了大量控制台日志，如下所示：

(66) childlist edited

(2) childlist edited

(14) childlist edited

(81) childlist edited

这就是我想要发生的事情：

1)当li的值发生变化时，运行一个函数

2) 该函数将从所有 li 中清除所有 css，然后将背景红色添加到刚刚编辑的 li 中。

function onTimerElapsed() {
 var next = Math.floor(Math.random() * jQuery('#stuff ul li').length - 1);

 if (next === -1) {
  next = 0;

 }

 var nextLi = document.querySelectorAll('#stuff ul li')[next];

 var id = nextLi.attributes["id"].value;

 $('#' + id).text(Math.floor(Math.random() * 1150));
 
 var targetNode = document.querySelector("#stuff ul");
 var observerOptions = {
   childList: true,
   attributes: true,
   subtree: true //Omit or set to false to observe only changes to the parent node.
 }

 var observer = new MutationObserver(callback);
 observer.observe(targetNode, observerOptions);
 }

 function callback(mutationList, observer) {
  mutationList.forEach((mutation) => {
    switch(mutation.type) {
      case 'childList':
        console.log('childlist edited')
        break;
      case 'attributes':
        console.log('attr edited')
        break;
    }
  });
}

$(document).ready(function() {
setInterval(onTimerElapsed, 4000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Detect Dom change</h1>
<div id="stuff">
 <ul>
  <li class="total" id="t1">1453</li>
  <li class="total" id="t2">523</li>
  <li class="total" id="t3">54643</li>
  <li class="total" id="t4">2324</li>
  <li class="total" id="t5">56476</li>
  <li class="total" id="t6">3434</li>
 </ul>
</div>

Answer 1

MutationObserver 回调采用 MutationRecord，其中有一个 target 属性引用相关元素。使用 target 而不是 this 来引用属性或子树更改的元素：

mutationList.forEach((mutation) => {
  switch(mutation.type) {
    case 'childList':
      mutation.target.style.backgroundColor = 'red';
      console.log('childlist edited');
      break;
    case 'attributes':
      console.log('attr edited')
      break;
  }
});

Javascript MutationObserver：如何突出显示已编辑的 DOM 元素？

Javascript MutationObserver: How to Highlight edited DOM element?

javascript

mutation-observers