The Swamp of ECU Development

ようこそ．あなたは 4105 人目のお客様です．キリ番踏んだら連絡してね．

このサイトはniiimがオープンな情報を元に適当なまとめた情報を掲載しています．間違いがあればご指摘頂けると助かります．

[JS] MutationObserver

posted: 2022-07-23, updated: 2023-05-07

MutationObserverではDOMのイベントを検知し指定のコールバックを呼出すための組込みオブジェクトです．

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

MutationObserverは変更を検知しないものがあるようで詰まりました．

例えば次のコードです．

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <div id="testId" class="testClass">testText</div>

      <script>
         var targetNode = document.getElementById("testId");
         console.log(targetNode);
         var observer = new MutationObserver((mutations, observer) => {console.log(mutations);});
         observer.observe(targetNode, {attributes: true, childList: true, subtree: true} );

         targetNode.innerHTML = "foo";
      </script>
   </body>
</html>

Chrome97において，上記コードでのMutationObserverは次の挙動になりました．

  1. コード内のinnerHTMLの変更を検知する．
  2. デバッガ上でdivのclassを変更した時，その変更を検知する．
  3. デバッガ上でdiv内の文字列(testText)を変更した時，その変更を検知しない．