如何获取延迟出现的id为list的DOM元素文本？已尝试DOMContentLoaded

这问题我太熟了——动态加载的元素确实会让直接获取的代码翻车，毕竟你跑代码的时候它还没“出生”呢！下面给你两种靠谱的解决方案，按需选就行：

方法1：定时轮询（简单直观） #

这种方法就是每隔一小段时间检查一次目标元素是否存在，找到后就执行获取文本的操作，然后停止轮询。优点是代码简单，容易理解，适合快速解决问题。

// 设置轮询定时器，每隔500毫秒检查一次
const checkInterval = setInterval(() => {
  const listElement = document.getElementById("list");
  if (listElement) {
    // 元素存在，获取文本并输出
    const lists = listElement.textContent;
    console.log(lists);
    // 找到元素后清除定时器，避免无用的轮询
    clearInterval(checkInterval);
  }
}, 500);

方法2：MutationObserver（高效推荐） #

如果想更优雅、更高效地解决问题，MutationObserver是更好的选择——它能监听DOM树的变化，当目标元素被添加到页面时，立刻触发回调操作，不用像轮询那样反复检查，性能更优。

下面是完整的实现代码，补全了你之前没写完的部分：

// 目标元素的选择器
const targetSelector = "#list";
// 选择要监听的根节点（一般选document.body就行，或者更具体的父容器）
const observerRoot = document.body;

// 配置观察器：监听子节点的添加/移除，以及节点属性变化（可选）
const observerConfig = {
  childList: true,
  subtree: true, // 监听所有子树的变化，确保能捕捉到深层添加的元素
  attributes: false
};

// 创建观察器回调函数
const observerCallback = (mutationsList, observer) => {
  // 遍历所有DOM变化记录
  for (const mutation of mutationsList) {
    // 检查是否有新节点被添加
    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
      // 检查新添加的节点里有没有目标元素
      const listElement = document.querySelector(targetSelector);
      if (listElement) {
        const lists = listElement.textContent;
        console.log(lists);
        // 找到元素后断开观察器，避免后续无用监听
        observer.disconnect();
        break;
      }
    }
  }
};

// 创建并启动观察器
const observer = new MutationObserver(observerCallback);
observer.observe(observerRoot, observerConfig);

额外提醒 #

• 如果你的目标元素有固定的父容器，把observerRoot换成那个父容器，观察范围更小，性能会更好。
• 不管用哪种方法，记得在获取到元素后停止监听/轮询，避免不必要的性能消耗。

内容的提问来源于stack exchange，提问作者user9638079