如何使用querySelector选中</body>标签外的动态ID元素？

首先明确：浏览器会自动修正不符合规范的DOM结构——哪怕第三方脚本把元素插在</body>闭合标签之后、<html>标签内部，最终这些元素会被浏览器移动到<body>标签内。所以你写的选择器本身是有效的，只要处理好执行时机即可。

核心选择逻辑 #

你使用的属性包含选择器div[id*="startOfID"]完全能匹配ID中包含固定前缀startOfID的div元素，直接通过document.querySelector调用就能获取第一个匹配的元素：

const targetElement = document.querySelector('div[id*="startOfID"]');

如果需要获取所有符合条件的元素，改用document.querySelectorAll即可。

关键注意点 #

1. 确保元素已被插入
   第三方脚本的执行时机不确定，如果你在元素插入前调用选择器，会返回null。推荐两种可靠的检测方式：

   • 轮询检测（简单直接）：

     const elementChecker = setInterval(() => {
       const target = document.querySelector('div[id*="startOfID"]');
       if (target) {
         // 在这里处理找到的元素
         console.log('目标元素已找到', target);
         clearInterval(elementChecker);
       }
     }, 100); // 每100毫秒检查一次，可根据需求调整间隔
     

   • MutationObserver监听（更高效）：

     const observer = new MutationObserver((mutations) => {
       const target = document.querySelector('div[id*="startOfID"]');
       if (target) {
         // 处理目标元素
         console.log('目标元素已找到', target);
         observer.disconnect(); // 找到后停止监听
       }
     });
     
     // 监听整个文档的节点添加事件
     observer.observe(document.documentElement, {
       childList: true,
       subtree: true
     });
     

2. 避免选择器冲突
   如果页面中存在其他ID包含startOfID的div，可进一步缩小选择范围，比如结合元素的其他属性（如类名、父节点特征）优化选择器，例如：

// 假设目标元素还有特定类名
document.querySelector('div.special-class[id*="startOfID"]');

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