DOMを監視して遅延読み込み要素のテキストを動的に変更する方法

document.addEventListener('DOMContentLoaded', function() {

  // お知らせバーの変更
  const infoBarText = document.querySelector('.c-infoBar__text');
  if (infoBarText) {
    infoBarText.textContent = '任意のテキスト';
  }

});

// 監視対象
const footer = document.querySelector(".l-footer");

// DOMに変更があったときに実行されるコールバック関数
const observer = new MutationObserver(function (mutations) {
  for (const mutation of mutations) {
    const copyright = document.querySelector(".copyright");

    if (copyright) {
      copyright.innerHTML = '<span lang="en">©</span> 任意のコピーライト';
      observer.disconnect(); // 要素が見つかったら監視を停止
    }
  }
});

// 監視対象を監視
observer.observe(footer, {
  childList: true, // 子要素の追加や削除を監視
  subtree: true,   // 監視対象の要素内の全ての子孫要素も監視
});

// DOMに変更があったときに実行されるコールバック関数
const observer = new MutationObserver(function (mutations) {
  for (const mutation of mutations) {
    // 実行したい処理を記述
  }
});

// 監視対象を監視
observer.observe(document.body, {
  childList: true, // 子要素の追加や削除を監視
  subtree: true,   // 監視対象の要素内の全ての子孫要素も監視
});

// 1. 監視対象の要素を取得
const targetNode = document.querySelector('.target-element');

// 2. 変更を検知したときに実行されるコールバック関数を定義
const callback = function(mutationsList, observer) {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('子要素が変更されました。');
        } else if (mutation.type === 'attributes') {
            console.log('属性が変更されました。');
        }
    }
};

// 3. MutationObserverのインスタンスを作成
const observer = new MutationObserver(callback);

// 4. 監視オプションを設定
const config = {
    attributes: true,   // 属性の変更を監視
    childList: true,    // 子要素の追加・削除を監視
    subtree: true       // 子孫要素の変更も監視
};

// 5. 監視を開始
observer.observe(targetNode, config);

// 6. 監視を停止したいとき（必要に応じて呼び出す）
observer.disconnect();