Typescriptで動的なMutationObserverの追加

概要

MutationObserver

詳しい内容についてはこちらの記事が素晴らしい内容でまとめてくださっているのでそちらを参考に。
JavaScriptのMutationObserverでDOMの変化を監視する方法 - Qiita

要するに、特定のDOMの状態変化を検知することができ、検知したあとに特定の処理を実行することができます。
今回はこれをTypescriptで動的にobserverの対象を増やす処理を実装しました。

単一の監視のコード例

    //#region 監視
    // ターゲットの要素を取得(ByClasNameで1番目の要素を取得する)
    const target: Node = document.getElementsByClassName('DataGrid-Table CommentPanelDataGrid-Table')[0];
    // オブザーバーの作成
    const observer = new MutationObserver(records => {
        // 状態変化があったときの処理をここに書く
    });
    // 監視オプションの作成
    const options = {
        attributes: true
    };
    // 監視の開始
    observer.observe(target, options);
    //#endregion

上記が基本的な使い方になります、

動的にobserverの監視対象を増やすために下記の実装をしました。
イメージとしてはグリッドのような表があり、その内容が変化したり増減したりする場合に用います。
上記の処理で、状態変化があったときに呼ばれる処理の中に下記の処理を呼ぶ（関数化するのがベターかな）ようにすることで
内容が変化するたびにobserverの対象を増やす（減らす）ようにしました。

    //#region 各セルの変更を監視する
    const observer3 = new MutationObserver(function (...args) {
        // 内容が変化したときの処理
        // console.log(this, args);
    });
    const option3 = {
        attributes: true
    };
    let cellData = document.getElementsByClassName('InlineEdit OwnerCommentEditContainer-inlineEdit');
    for (const selector of cellData as any) {
        observer3.observe(selector, option3);
    }
    ////#endregion

どのセルの内容が変化したのかはconsole.log(this, args);で確認できます。

参考

MutationObserver で複数 observe する場合
JavaScriptのMutationObserverでDOMの変化を監視する方法 - Qiita
Observerを使って要素を監視してみよう！ | フロントエンドBlog | ミツエーリンクス