Chrome/Opera中querySelector在YouTube页面返回结果不一致问题

核心原因 #

登录Google账号后，YouTube的页面DOM渲染结构会根据账号状态、频道设置发生变化：

• 虽然浏览器控制台用完整选择器#above-the-fold #description-inner #tooltip能定位到元素，但登录状态下#tooltip实际并不在#above-the-fold的直接DOM子树中。全局querySelector会遍历整个文档（包括Shadow DOM、动态插入节点），但通过父元素调用querySelector仅会遍历该元素的直接子树，因此返回null。
• 同一账号下部分频道出现问题，是因为不同频道的页面布局渲染逻辑存在差异，导致元素的从属链发生改变。

解决方案 #

1. 简化选择器，直接全局查询
   ID在文档中具有唯一性，不需要嵌套父元素选择器，直接全局查询更可靠：

let el = document.querySelector('#tooltip');
console.log(el);

如果必须从指定父元素查询，先确认元素真实从属关系：在控制台选中#tooltip后执行$0.closest('#above-the-fold')，若返回null，说明该元素确实不在目标父元素下，需调整父元素选择器。

2. 处理动态渲染延迟
   YouTube大量元素为动态加载，若代码执行时机过早，即使DOM结构正确也会查询失败，可通过以下方式解决：

// 延迟查询（简易方案）
setTimeout(() => {
  let e = document.getElementById('above-the-fold');
  let el = e?.querySelector('#tooltip'); // 用可选链避免父元素不存在时报错
  console.log(el);
}, 1000);

// DOM变化监听（更可靠方案）
const observer = new MutationObserver((mutations) => {
  let e = document.getElementById('above-the-fold');
  let el = e?.querySelector('#tooltip');
  if (el) {
    console.log(el);
    observer.disconnect(); // 找到元素后停止监听
  }
});
observer.observe(document.body, { childList: true, subtree: true });

3. 替换为类/属性选择器
   若存在ID动态生成、重复的异常情况，改用类或属性定位元素：

let el = document.querySelector('.tp-yt-paper-tooltip[style-target="tooltip"]');
console.log(el);

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