Mutation Observer in JavaScript

JavaScript

【JavaScript】テキストの変更を監視する方法

MutationObserver APIはDOMの変更を監視するAPIですが、今回はこのAPIを使ってテキストが変更されたらアラートを出すコードをサンプルとして書きました。
テキスト以外にも属性や子要素などの監視にも使えます。
詳しくはMutationObserver – Web API インターフェイス | MDNをご覧ください。

サンプルコード

<p id="text">テキスト</p>
Markup
// オブザーバーの作成
const observer = new MutationObserver(function(record, observer) {
  alert('テキストが変更されました。');
});

// 監視の開始
// 第一引数にターゲットのDOM、第二引数にオプションを指定します。
observer.observe(document.getElementById('text'), {
  characterData: true,
  childList: true,
});

// 監視の停止
// 監視を停止する際はdisconnect()を実行
// observer.disconnect();
JavaScript