详解如何使用JavaScript获取自动消失的联想词

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

const observers = new Map()

/**
 * 启动监视指定选择器的元素变化。
 * @param {string} selector - CSS选择器，可以是类名（以`.`开头）或ID（以`#`开头）。
 * @param {function} callback - 回调函数，当符合选择器的元素添加到DOM时调用。
 */
function startObserving(selector, callback) {
  /**
   * 观察者回调函数，监视DOM树的变化。
   * @param {MutationRecord[]} mutationsList - DOM变化记录的列表。
   * @param {MutationObserver} observer - 观察者实例。
   */
  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)
            }
          }
        })
      }
    }
  }
  // 创建一个观察者实例并开始观察指定的目标节点和配置
  const observer = new MutationObserver(observerCallback)
  // 观察配置，配置对象指定我们希望观察子节点的变化（`childList: true`）以及观察整个子树中的变化（`subtree: true`）
  const config = { childList: true, subtree: true }
  // 观察整个文档，所以将目标节点设置为`document.body`。
  observer.observe(document.body, config)
  // 将观察者存储在Map中
  observers.set(selector, observer)

  // 设置定时器，指定时间后自动停止观察并删除观察者，回收资源
  setTimeout(() => {
    stopObserving(selector)
  }, 5 * 60 * 1000)
}


/**
 * 停止监视指定选择器的元素变化。
 * @param {string} selector - CSS选择器，可以是类名（以`.`开头）或ID（以`#`开头）。
 */
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';

// 通过类名启动监视
startObserving('.xiaodou-class', (htmlContent) => {
    console.log('Element with class added:', htmlContent);
});

// 通过ID启动监视
startObserving('#xiaodou-id', (htmlContent) => {
    console.log('Element with ID added:', htmlContent);
});

// 停止监视
setTimeout(() => {
    stopObserving('.xiaodou-class');
    stopObserving('#xiaodou-id');
}, 6000);

/**
* 观察者回调函数，监视DOM树的变化。
* @param {MutationRecord[]} mutationsList - DOM变化记录的列表。
* @param {MutationObserver} observer - 观察者实例。
*/
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);
        }
      }
    });
  }
}