ゴマちゃんフロンティア

アザラシが大好きな山梨県産SEの開発日記です

【JavaScript】動的に追加される要素の出現時に特定の処理を行う方法

time 2019/07/31

今回はwebエンジニアっぽくJavaScriptのお話です。
以下のようなHTMLがあったとして、

<html>
    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <h1>アザラシのホームページ</h1>

        <div id="azarashi">
        </div>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script>
            $(function() {
                setTimeout(function() {
                    $('#azarashi').append('<p class="goma1">ゴマフアザラシ</p>');
                }, 300);
            });
        </script>
    </body>
</html>

ここで言うゴマフアザラシのような「後から動的に追加される要素」を検知し、何か処理を行いたい場合があります。
クリックのようなイベントであれば、静的要素にon()でハンドラを追加することで実現できますが、「特定の要素が出現したとき」には使えません。
要素が出現するまで無限ループでチェックし続ける方法もありますが、あまり綺麗とは言い難いですよね。

こんな時はMutationObserverクラスを使うといい感じに実装できます。

$(function() {
    let mutationObserver = new MutationObserver(function() {
        if ($('#azarashi .goma1').length) {
            $('#azarashi .goma1').append("<p>ゴマ模様が特徴のアザラシ</p>");
            mutationObserver.disconnect();
        }
    });

    mutationObserver.observe(
        document.getElementById('azarashi'),
        {
            childList: true,
            subtree: true
        }
    );

    setTimeout(function() {
        $('#azarashi').append('<p class="goma1">ゴマフアザラシ</p>');
    }, 300);
});

observe()の第2引数に指定できるオプションは様々です。詳しくはMDNドキュメントを参照してください。

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

この例ではChildListを指定し、子の要素数が変化したらコールバック関数を実行するようにしました。
コールバック関数内で目的の要素が出現したか確認し、あれば任意の処理を行いつつ、observerの監視を停止します。

この例ではあまりメリットが実感できませんが、要素を追加するJSがライブラリや外部のものなどで手を加えられない場合に有用です。

スポンサーリンク

down

コメントする



このブログを書いている人

りべるん

りべるん

アザラシがとっても大好きな山梨県産Webエンジニア。2019年3月よりフリーランスSEとして東京で活動中。自称「Web業界のアザラシ」 [詳細]

ツイッター



スポンサーリンク