新米エンジニアの失敗再発防止メモ

自分そしてこの世界の皆が、同じ失敗をしないためのメモ

Twitterやってます!@rakuton_t
欲しいものリストのブタメンを送ってくれた方、ありがとうございます!

【JavaScript + JQuery】DOMの変更を監視するリスナー

特定のページで面倒な操作を自動でやりたいときなど、拡張機能を作成すると思います。
リンクやボタンをクリックした時に、ページ遷移じゃなくてDOM全体がふわっと変わるような洒落乙なサイトも時々あって、そういうときって
DOMが変更された時に反応して処理を走らせたかったりします。

やり方

$('HTML').on('DOMSubtreeModified propertychange', function() {
       // DOMが変更された時に動く処理
});

この場合、htmlタグの中の何かが変更されたら処理が走ります。
セレクタ「$('HTML')」の部分を変えれば範囲を絞れます。

ただ気を付けて欲しいのが、

セレクタが配列だとだめ

$('div').on('DOMSubtreeModified propertychange', function() {
       // DOMが変更された時に動く処理
});

divタグはたくさん使いますからね。一意になりません。
やるなら

$('div')[0].on('DOMSubtreeModified propertychange', function() {
       // DOMが変更された時に動く処理
});

ですね。
divでもspanでもなんでも一意に指定できれば可能です。
まぁリスナってそういうものですよね。どうしても全部やりたいならforで回してひとつひとつ付けてやりましょう。

セレクタで指定したDOMそのものが消えてしまう場合もだめ

$('#will_delete')on('DOMSubtreeModified propertychange', function() {
       // DOMが変更された時に動く処理
});

これだと、こんな感じに消されると反応しません。

$('#will_delete').remove()




セレクタについて

JQureyで要素を指定するセレクタのやり方全部書いてあるサイト貼っときます。
地味にこれから調べようとしてる人いますよね多分
www.hp-stylelink.com

私の記事が役に立ったら、どうぞ何か買ってください!→ Amazon欲しいものリスト