设置 document.body.outerHTML 会创建空头。为啥？

Posted 2023-05-07

技术标签:

【中文标题】设置 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 但错误报告被关闭为无效引用它的行为符合规范。而且它似乎在浏览器中是通用的。 【参考方案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 中。

【讨论】：

以上是关于设置 document.body.outerHTML 会创建空头。为啥？的主要内容，如果未能解决你的问题，请参考以下文章

win10设置里的代理怎么设置

强制恢复出厂设置？

怎么设置标题样式?

HTMLHTML 注册表单案例 ① ( 表格设置 | 设置表格位置和大小 | 设置表格标题 | 表单设置 | 表格中设置单选按钮 )