Firefox中YouTube页面.children属性返回结果与检查器不符问题

问题原因 #

这是Firefox与Chromium系浏览器（Chrome/Edge）对Shadow DOM的处理差异导致的：

• YouTube的masthead元素采用Shadow DOM封装了核心界面结构，浏览器检查器显示的是Shadow Root内部的真实子节点。
• Chrome/Edge的TamperMonkey默认会将脚本注入到Shadow DOM环境中，所以调用.children能直接获取到Shadow Root内的节点。
• Firefox的TamperMonkey默认未开启Shadow DOM注入，脚本运行在主DOM上下文，此时.children只能拿到masthead元素在主DOM树中的直接子节点（也就是Shadow DOM宿主的外部节点），和检查器显示的内容自然不一致。

解决方法 #

方法1：开启TamperMonkey的Shadow DOM注入 #

在脚本的元数据头部添加或修改以下配置，确保脚本能注入到Shadow DOM环境：

// @inject-into content
// @match *://*.youtube.com/*

如果配置后仍不生效，可以进入TamperMonkey的脚本管理页面，找到对应脚本，手动勾选「在Shadow DOM中注入」选项。

方法2：手动访问Shadow Root获取真实节点 #

如果不想修改脚本配置，直接通过宿主元素的shadowRoot属性访问内部DOM结构：

const masthead = document.getElementById("masthead");
// 获取Shadow Root内的所有子节点
const realChildren = masthead.shadowRoot.children;
// 也可以在Shadow Root内直接查询指定元素
const containerDiv = masthead.shadowRoot.getElementById("container");

注：YouTube的masthead使用的是开放模式的Shadow Root，shadowRoot属性可以正常访问；如果遇到封闭模式的Shadow Root，该属性会返回null，这种情况只能通过方法1解决。

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