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

どうも、@De_webdesignです。

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

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

DEMO

ITEM01

ITEM02

ITEM03

コード

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

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

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

まとめ

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

では。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。