设置 document.body.outerHTML 会创建空头。为什么？答案

【问题标题】：Setting document.body.outerHTML creates empty heads. Why?设置 document.body.outerHTML 会创建空头。为什么？
【发布时间】：2019-03-24 02:36:18
【问题描述】：

重置document.body 的outerHTML 属性有一个奇怪的副作用：它将额外的空<head></head> 添加到DOM 中，就在body 之前：

head { display: inline; counter-increment: h; border: 1px solid; }
head:last-of-type::after { content: 'Head elements count: ' counter(h); }
[onclick]::after { content: attr(onclick); }

&lt;button onclick="document.body.outerHTML=document.body.outerHTML"&gt;&lt;/button&gt;

所有浏览器似乎在这方面都是一致的。我已经been told 它被指定为这种方式，但无法挖掘权威标准的立场，甚至在讨论档案中也没有提及。你知道这方面的一些背景，还是有一些技术原因必须这样？有什么想法吗？

【问题讨论】：

因为 body 的内容是可替换的，但 body 本身不是？无论如何，它看起来像一个错误。
@ChaseChoi 但错误报告被关闭为无效引用它的行为符合规范。而且它似乎在浏览器中是通用的。

标签： javascript html dom outerhtml

【解决方案1】：

有趣的问题。不幸的是，解释隐藏在HTML fragment parsing algorithm 的细节中，该细节引用自DOM Parsing 规范中outerHTML 的定义。

您需要非常仔细地跟踪解析器状态以了解原因，但本质上它是这样工作的。使用outerHTML，解析器被初始化，就好像它刚刚解析了给定节点的父节点的开始标记。对于 document.body，这就是 html 元素。

在 HTML 解析算法中，当解析一个 html 开始标记时，解析器接下来需要的是一个 head 元素。但是因为在 HTML 中，head 元素的开始和结束标签是可选的，如果接下来没有看到 head 开始标签，它会推断出一个。所以在 document.body.outerHTML 的情况下，解析器接下来看到的是 body 开始标签，因此首先创建了一个空的 head 元素。

最后，一旦片段被解析，整个片段，包括推断的 head 元素都被添加到 DOM 中。

【讨论】：