1

observerを用いて特定の要素を監視したいのですが、ページ読み込み直後にはその要素が存在していないため、var target = document.querySelector('ul[id="item-grid"]');として要素を取得し、その値がnullだったなら繰り返し処理をさせるというように書きました。

function LW() {
  var target = document.querySelector('ul[id="item-grid"]');
  if ( target === null ) {
    setTimeout( LW, 500 );
    return;
  }
  var observer = new MutationObserver(records => {
    console.log("TEST");
  })
  observer.observe(target, {childList: true})
}
LW()

その後、要素が見付かり次第observerを実行させたいのですが、この書き方だとどうもうまく動作しません。
恐らくLW()が閉じるタイミングで動作が終了してしまっているからだと思います。

どのように記述すればページの読み込みが完了した段階でobserverを発火出来るのか教えて頂けると幸いです。

1 件の回答 1

1

こちらのページにいい例があります。

【JavaScript】条件を満たすまで待機する処理の書き方 – 株式会社シーポイントラボ | 浜松のシステム・RTK-GNSS開発

このページのコードを拝借すれば

let target = null;

function waitAsync(conditionCallback, resolve,intervalMilliSecond = 500){
  if(conditionCallback()){
    resolve();
    return;
  }
  const intervalId = setInterval(()=>{
    if(!conditionCallback()){
      return;
    }
    clearInterval(intervalId);
    resolve();
  }, intervalMilliSecond)
}
 
const observer = new MutationObserver(records => {
  console.log("TEST");
});

waitAsync(
  () => {
    target = document.querySelector('ul[id="item-grid"]');
    return target !== null;
  },
  () => {
    observer.observe(target, {childList: true});
    console.log('ok');
  }
);

と書けますね。

テストのため、上記のコードの前に下記のコードを加えて、2秒後にtargetが作られるようにしてみましょう。

function add_ul() {
  const ul = document.createElement('ul');
  ul.id = 'item-grid';
  document.body.appendChild(ul);
}
setTimeout( () => add_ul(), 2000 );

コードを走らせると、数秒後にコンソールに"ok"が表示されることが確認できました。

4
  • 回答ありがとうございます。記載して頂いたコードは動作せず、また教えて頂いたページを参考に書き直しても理解が及びませんでした。具体的には記載して頂いたコードの場合はtargetが存在しないとされ、targetを指定しなおしてもobserverが動作してくれませんでした。また教えて頂いたページを参考に書いた場合も同じでobserverが動作してくれませんでした。お手数だとは思いますが、もう少しだけ分かり易く教えて頂けることは可能でしょうか。 Commented 2022年1月14日 9:05
  • やっぱり一発では正しくコーディングできませんでしたね。テスト用コードを追加し、コードが期待どおり動くよう修正しました。このコードでわからないところがあれば別途質問してください。 Commented 2022年1月14日 10:14
  • 補足修正ありがとうございます。同じく試して見ましたが、target(ul[id="item-grid"])に変更があっても、observer(console.log("TEST");)が実行されませんでした。しかし、なぜか同じスクリプトを二度実行すると正常に動作しています。 Commented 2022年1月14日 17:03
  • body全体を常時監視させて、targetが見付かり次第observerを実行するように試して見たのですが、はやりそれも一回目は動作してくれませんでした。 恐らくこの問題については、私の環境或いは、実行しているサイトに問題がある可能性あるので、この質問は一旦クローズします。 長らくお付き合い頂き本当にありがとう御座いました。 Commented 2022年1月14日 19:39

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。