HTML规范中的document-tree child browsing context是什么？

你产生疑问的核心是对「子浏览上下文的容器」这一表述的误读：这个容器不是父浏览上下文本身，而是父浏览上下文渲染的文档中的嵌入DOM元素（如<iframe>、<embed>、<object>等可以加载独立文档的标签），这类元素本身就是标准DOM节点，自然可以满足「处于document tree」的判定条件。

核心概念梳理 #

两个规范定义的正确关联逻辑如下：

若子浏览上下文属于父浏览上下文的子上下文，且该子上下文的容器（嵌入DOM元素）处于document tree中，则该子浏览上下文是父上下文的document-tree child browsing context。
若一个元素的根节点是document，则该元素处于in a document tree状态。

完整逻辑链条为：

• 浏览器渲染父文档时，每遇到一个插入到DOM树中的嵌入元素，就会为其创建一个独立的子浏览上下文，用来加载、运行该元素指向的独立文档
• 只要承载这个子浏览上下文的嵌入元素还保留在父文档的DOM树中，没有被移除或脱离DOM，这个子浏览上下文就属于父上下文的document-tree child browsing context
• 如果嵌入元素被从父文档DOM树中移除，哪怕子浏览上下文因为引用持有还没有被销毁，它也不再属于这一分类

示例说明 #

示例1：符合定义的场景 #

<!-- 父文档代码 -->
<body>
  <!-- 该iframe已经插入到父文档DOM树中 -->
  <iframe id="demoIframe" src="./sub-page.html"></iframe>
  <script>
    const iframeEle = document.querySelector('#demoIframe');
    // 此时iframeEle对应的子浏览上下文，就是父浏览上下文的document-tree child browsing context
    const childBrowsingContext = iframeEle.contentWindow;
  </script>
</body>

示例2：不符合定义的场景 #

<body>
  <script>
    // 1. 动态创建的iframe未插入DOM时
    const newIframe = document.createElement('iframe');
    newIframe.src = './sub-page.html';
    // 此时newIframe不在父文档DOM树中，它对应的子浏览上下文不属于该分类

    // 2. 插入后再移除
    document.body.appendChild(newIframe);
    // 插入后的阶段属于该分类
    document.body.removeChild(newIframe);
    // 移除后，哪怕newIframe变量还持有DOM节点引用，子浏览上下文也不再属于该分类
  </script>
</body>

区分该概念的意义 #

规范中做这个区分主要用于统一浏览上下文的生命周期管理、事件冒泡规则、导航行为判定等逻辑，比如只有document-tree类的子浏览上下文的加载事件才会冒泡到父文档的DOM树，脱离DOM的子上下文相关事件不会触发父文档的监听。

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