const elementByClassName = document.querySelector(".luoxiaodou");
if (elementByClassName) {
    const htmlContent = elementByClassName.innerHTML;
    console.log(htmlContent);
}

const observers = new Map()

/**
 * 啟動(dòng)監(jiān)視指定選擇器的元素變化。
 * @param {string} selector - CSS選擇器，可以是類名（以`.`開(kāi)頭）或ID（以`#`開(kāi)頭）。
 * @param {function} callback - 回調(diào)函數(shù)，當(dāng)符合選擇器的元素添加到DOM時(shí)調(diào)用。
 */
function startObserving(selector, callback) {
  /**
   * 觀察者回調(diào)函數(shù)，監(jiān)視DOM樹(shù)的變化。
   * @param {MutationRecord[]} mutationsList - DOM變化記錄的列表。
   * @param {MutationObserver} observer - 觀察者實(shí)例。
   */
  const observerCallback = function (mutationsList, observer) {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList') {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            if (selector.startsWith('#') && node.id === selector.slice(1)) {
              callback(node.outerHTML)
            } else if (selector.startsWith('.') && node.classList.contains(selector.slice(1))) {
              callback(node.outerHTML)
            }
          }
        })
      }
    }
  }
  // 創(chuàng)建一個(gè)觀察者實(shí)例并開(kāi)始觀察指定的目標(biāo)節(jié)點(diǎn)和配置
  const observer = new MutationObserver(observerCallback)
  // 觀察配置，配置對(duì)象指定我們希望觀察子節(jié)點(diǎn)的變化（`childList: true`）以及觀察整個(gè)子樹(shù)中的變化（`subtree: true`）
  const config = { childList: true, subtree: true }
  // 觀察整個(gè)文檔，所以將目標(biāo)節(jié)點(diǎn)設(shè)置為`document.body`。
  observer.observe(document.body, config)
  // 將觀察者存儲(chǔ)在Map中
  observers.set(selector, observer)

  // 設(shè)置定時(shí)器，指定時(shí)間后自動(dòng)停止觀察并刪除觀察者，回收資源
  setTimeout(() => {
    stopObserving(selector)
  }, 5 * 60 * 1000)
}


/**
 * 停止監(jiān)視指定選擇器的元素變化。
 * @param {string} selector - CSS選擇器，可以是類名（以`.`開(kāi)頭）或ID（以`#`開(kāi)頭）。
 */
function stopObserving(selector) {
    const observer = observers.get(selector);

    if (observer) {
        observer.disconnect();
        observers.delete(selector);
    }
}

export { startObserving, stopObserving };

import { startObserving, stopObserving } from './element-observer.js';

// 通過(guò)類名啟動(dòng)監(jiān)視
startObserving('.xiaodou-class', (htmlContent) => {
    console.log('Element with class added:', htmlContent);
});

// 通過(guò)ID啟動(dòng)監(jiān)視
startObserving('#xiaodou-id', (htmlContent) => {
    console.log('Element with ID added:', htmlContent);
});

// 停止監(jiān)視
setTimeout(() => {
    stopObserving('.xiaodou-class');
    stopObserving('#xiaodou-id');
}, 6000);

/**
* 觀察者回調(diào)函數(shù)，監(jiān)視DOM樹(shù)的變化。
* @param {MutationRecord[]} mutationsList - DOM變化記錄的列表。
* @param {MutationObserver} observer - 觀察者實(shí)例。
*/
const observerCallback = function (mutationsList, observer) {
for (const mutation of mutationsList) {
  if (mutation.type === 'childList') {
    mutation.addedNodes.forEach((node) => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        if (selector.startsWith('#') && node.id === selector.slice(1)) {
          // 使用 setTimeout 確保 DOM 完全渲染后獲取 outerHTML
          setTimeout(() => callback(node.outerHTML), 1000);
        } else if (selector.startsWith('.') && node.classList.contains(selector.slice(1))) {
          // 使用 setTimeout 確保 DOM 完全渲染后獲取 outerHTML
          setTimeout(() => callback(node.outerHTML), 1000);
        }
      }
    });
  }
}