SPA路由切换时DOMContentLoaded不生效，如何获取动态加载的DOM元素？

你当前的代码无效的核心原因是 DOMContentLoaded 事件仅在初始页面加载完成时触发一次。你的SPA通过History API实现路由跳转，不会触发整页刷新，/dashboard/posts 路由对应的.post节点是动态插入DOM的，插入时机晚于DOMContentLoaded触发时间，所以绑定在该事件里的逻辑无法获取到目标节点。

以下是按优先级排序的解决方案：

• 方案1：在路由渲染钩子中执行逻辑（最优）
  你所用的SPA架构中，每个路由页面对应独立的类，都有render方法负责生成DOM并插入容器。你可以直接将文本截断逻辑写在posts页面的render方法末尾，DOM插入完成后立即执行，完全没有时序问题。

• 方案2：通过MutationObserver监听DOM变化（无需修改路由逻辑）
  如果你不想改动路由层代码，可以监听SPA挂载根容器（通常是#app节点）的DOM变更，每次DOM更新后检查当前路径，匹配且.post节点存在时再执行目标逻辑，示例代码如下：

// 先取消truncateText函数的注释，避免未定义报错
function truncateText(text,length) {
  if (text.length > length) {
    const truncatedText = text.substr(0,length);
    return truncatedText + "..."
  }
  return text;
}

// 监听根容器DOM变化
const rootNode = document.querySelector('#app')
const observer = new MutationObserver(() => {
  if (window.location.pathname !== "/dashboard/posts") return
  const posts = document.querySelectorAll('.post')
  if (posts.length === 0) return

  posts.forEach((post) => {
    const postTextH = post.children[0].children[1].children[0]
    const postText = post.children[0].children[1].children[1]
    postText.innerText = truncateText("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco",150)
    postTextH.innerText = truncateText("How to never give up!",70)
  })
})

observer.observe(rootNode, {
  childList: true,
  subtree: true
})

// 首次加载如果直接进入posts路由，主动执行一次
if (window.location.pathname === "/dashboard/posts") {
  const posts = document.querySelectorAll('.post')
  if (posts.length > 0) {
    posts.forEach((post) => {
      const postTextH = post.children[0].children[1].children[0]
      const postText = post.children[0].children[1].children[1]
      postText.innerText = truncateText("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco",150)
      postTextH.innerText = truncateText("How to never give up!",70)
    })
  }
}

• 方案3：setTimeout延时兜底（不推荐）
  也可以用setTimeout将查询节点的逻辑延时50-100毫秒执行，但是延时时长依赖DOM渲染速度，稳定性差，仅做临时调试用。

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