開発のAHです。

chatgptさんを使ってると普段使わないような新しいjavascriptのインスタンスが含まれていて学びが多い毎日です。
その中でIntersectionObserverというのがあったので調べたらObserver系のインスタンスがけっこうあったのでとりあえず使ってみます。

▫️IntersectionObserver

document.addEventListener(‘DOMContentLoaded’, function() {

var target = document.querySelector('#target');

var iobs = new IntersectionObserver(function(entries){

    entries.forEach(function(entry,index,arr){

        //見えたら発火
        if(entry.isIntersecting){

            console.log('発火');

        }

    });

}, {
    //要素がどれくらい見えたか
    threshold: 0.8
});

//監視開始
iobs.observe(target);

});

要素指定してスクロールして見えたら発火するやつでわりと使い所はある気がします。
rootMaginというオプションがあって発火する場所を細かく設定できるのは良いです。
複数監視はtarget部分が重複しないように再度observeすれば問題ないようです。

▫️MutationObserver

document.addEventListener(‘DOMContentLoaded’, function() {

var target = document.querySelector('#target');

var mobs = new MutationObserver(function(mutations){

    console.log('mutations');

});

// 監視開始
mobs.observe(target, {
    childList: true,      // 子ノードの追加・削除を監視
    attributes: true,     // 属性の変化を監視
    subtree: true,        // 子孫ノードも監視
    characterData: true,  // テキスト内容の変更も監視
});

setTimeout(function(){

    target.innerHTML = '<p>mutations</p>';


},5000);

});

DOMに追加などの変化が現れたら発火するという。
広告など外部からの変化を監視するには良いと書かれていたけれど・・・そんなに使うところあるのだろうか。
リアルタイムレンダリングするようなサイトでは一括で指定出来るのは便利だとは思うけれど。

あとは

ResizeObserver //要素のサイズ変更を監視
PerformanceObserver //パフォーマンスの監視
ReportingObserver //使えなくなった要素の監視

などあるようですが使い所が限定的だったので割愛。
使ってないものがいっぱいあってjavascriptは奥が深いです。

文：開発AH