このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなくて損したPC情報とかを分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • iPhone:「メール」で受信を再開しようとしたら迷いまくった話 (08/20)
  • iPhone:ホーム画面で複数のアプリをまとめて移動する (08/17)
  • Affinity Photo:伸縮しても崩れないフチ取り付きの枠線を作る (08/15)
  • Win:タスクバーのツールバー(クイック起動)が並び替えできない (08/13)
  • Windows:ファイルを別のアプリで開こうとしても無視される (08/10)
  • 管理人より
    2300万アクセス突破しました。ありがとうございます。

    JavaScript:要素の中身が変化した時にイベントを起こしたい

    このエントリーをはてなブックマークに追加
    操作画面


    こんにちは、さち です。

    先日、JavaScript を書いていたんですが
    要素(div)の中身が変化した時にイベントを起こしたいことがありました。

    最初は、「addEventListener」の「change」を使ったんですがダメでした。
    要素の中身の変化を検出するには
    「MutasionObserver」を使わないといけないみたいです。




    「change」イベントでは動かない

    <div> の中身が変更されたらアラート(ダイアログ)を出すように
    <div> に「addEventListener」の「change」を設定して
    こんな HTML, JavaScript を書きました。

    <div>にー</div>
    <button>「にっこ」追加</button>

    var div = document.getElementsByTagName('div')[0];
    div.addEventListener('change', function() {
    alert('divの中身が変更されたよ');
    }, false);

    var button = document.getElementsByTagName('button')[0];
    button.addEventListener('click', function() {
    div.textContent = 'にっこ' + div.textContent;
    }, false);

    しかし、下記のサンプルのとおりアラートは出ません。
    サンプル


    「addEventListener」の「change」は
    基本的に <input><select> の変化しか検出しないので
    <div> の中身が変化しても何も起こらないのです。




    「MutationObserver」を使う

    MutationObserver を使うことで
    <div> などの要素の中身の変更も検出できます。

    Mutation(ミューテーション) は「変化」
    Observer(オブザーバー)は「監視者」
    という意味なので、まさにそのままの名前です。

    今回の例で使うとこんな感じ。
    var div = document.getElementsByTagName('div')[0];
    var mo = new MutationObserver(function() {
    alert('divの中身が変更されたよ');
    });
    var config = {
    childList: true
    };
    mo.observe(div, config);

    var button = document.getElementsByTagName('button')[0];
    button.addEventListener('click', function() {
    div.textContent = 'にっこ' + div.textContent;
    }, false);

    実際のサンプルがこちら。ちゃんとアラートが出ます。
    サンプル





    「MutationObserver」の使い方

    MutationObserver を使う際の流れはこんな感じ。
    //監視する要素の指定
    var element = document.getElementById('id');

    //MutationObserver(インスタンス)の作成
    var mo = new MutationObserver(function(record, observer) {
    /* 変更検出時に実行する内容 */
    });

    //監視する「もの」の指定(必ず1つ以上trueにする)
    var config = {
    childList: true,//「子ノード(テキストノードも含む)」の変化
    attributes: true,//「属性」の変化
    characterData: true,//「テキストノード」の変化
    };

    //監視の開始
    mo.observe(element, config);

    //監視の終了
    mo.disconnect();

    MutationObserver はインスタンスを作っただけでは機能しません。
    「observe」メソッドで監視を開始しましょう。

    監視する「もの」は、3つの中から必ず1つ以上有効(true)にします。
    一番使うのは、中身の変化を検出する「childList」だと思います。
    「attributes」は属性名,属性値どちらの変化も検出します。
    「characterData」は、ややこしい上に使用頻度が低いので省略します。
    (「childList」で動かない時に有効にするという理解で何とかなる)

    監視する「もの」の指定では、下記の項目も併用できます。
    「attributeOldValue」「characterDataOldValue」を有効にした場合
    変更前の値は、MutationObserver の引数「record(配列)」内に記録されます。
    var config = {
    childList: true,
    attributes: true,
    characterData: true,
    subtree: true,//孫以降のノードの変化も検出
    attributeOldValue: true,//変化前の属性データを記録する
    characterDataOldValue: true,//変化前のテキストノードを記録する
    attributeFilter: [],//配列で記述した属性だけを見張る
    });

    「subtree: true」は使う機会が多そうなので実験してみます。

    どちらの <div> にも MutationObserver を設定し
    「childList: true」としていますが、「subtree」の設定が異なっています。
    <div> 内にある <span> の中身を変える場合、「subtree: true」でないと反応しません。
    サンプル


    Can I use... によると MutationObserver のブラウザ対応状況は
    IE が11以降、Edge がすべて、Firefox が14以降、Chrome が18以降、Safari が6以降、
    iOS が6.1以降、Android が 4.4以降です。
    よほど古いブラウザでない限りほぼ大丈夫ですね。









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2018 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ