changeではできない？JavaScriptでdivの変更を監視する方法

よくフォームでの値が変わったら〇〇という監視をするときにchangeを使うことがあると思いますが、divなどの中身が変更されたときに使用するのはご存知ですか？　changeが使えればいいのですが、changeではdivの変更を受け取ることができません。そんなときはDOMSubtreeModified propertychangeを使用することで監視することができます。

今回はその使用方法を紹介したいと思います。

コード

$(document).ready(function() {
    $('.div_change_lst').on('DOMSubtreeModified propertychange', function() {
        alert('removed');
    });
    $('.div_change_remove_btn').click(function() {
        $(this).parent().remove();
    });
});

div_change_lstに変化があったときにDOMSubtreeModified propertychangeの中のfunctionが実行されます。上記の場合だとalertでremovedと表示するようにしています。

削除ボタンの方は、div_change_remove_btnがクリックされたときに、クリックされたボタンの親要素、つまりdiv_change_itemをremove()でDOM要素ごと取り除いています。

div_change_itemがDOM要素から取り除かれたら、div_change_lstに変化があったことになるので、alertが実行されるというコードになります。

まとめ

form要素に対してchangeで監視を行うことはよくあったのですが、divに対しての監視をするのは今回が初めてでしたので覚書として記事にしました。あまり使う機会はないと思いますが、参考にしくれれば幸いです。

では。