💨

JSのMutationObserverで子要素の変更を感知する

2023/04/23に公開

HTML

結論

subtree:true
childListを使っても変更を感知できない

コード例

<!-- HTMLコード -->
<div id="list-item">
    <li  class="test">1</li>
    <li class="test">2</li>
    <li class="test">3</li>
</div>

    // 監視ターゲットの取得
    const target = document.getElementById('list-item')

    // オブザーバーの作成
    const observer = new MutationObserver(records => {
        // 変化が発生したときの処理を記述
        console.log("感知")
    })

    // 監視の開始
    observer.observe(target, {
        attributes: true,
        subtree: true,
    })

subtreeとchildListの違い

subtree
- 対象ノードとその子孫ノードに対する変更の監視
  - class変更やテキスト変更などに反応
childList
- 対象ノードの子ノード（テキストノードやコメントノードを含む）に対する変更（追加・削除）の監視
  - 要素の追加、削除に反応

childListの説明がサイトによって違ったりしてたのですが、childListはdeleteやaddにしか反応しないんですねー。。。（自分で確認済み）以下のサイトが参考なりました🙏

メモ

characterData: true, // テキストノードの変化を監視

pタグなどのテキストが変更された時、characterDataをtrueにしておかないと感知してくれないので注意。

結論

コード例

subtreeとchildListの違い

メモ

参考

Discussion