代码之家 › 专栏 › 技术社区 › myf

设置document.body.outerHTML将创建空头。为什么?

outerhtml dom html javascript

6

myf · 技术社区 · 6 年前

重置 outerHTML document.body 有一个奇怪的副作用:它增加了额外的空 <head></head> 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); }

<button onclick="document.body.outerHTML=document.body.outerHTML"></button>

been told 它被指定为这种方式,但未能挖掘出权威标准对此的立场,甚至没有任何提及在讨论档案。你知道这种情况的一些背景吗,或者是有技术上的原因吗?你知道吗?

1 回复 | 直到 6 年前

1

4

Alohci 6 年前

有趣的问题。不幸的是,这个解释被隐藏在 HTML fragment parsing algorithm 从 outerHTML

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

html格式 head 元素。但是,因为在HTML中,head元素的start和end标记是可选的,所以如果接下来没有看到head-start标记,它就会推断出一个。因此,在document.body.outerHTML的情况下,解析器看到的下一件事是 body 开始标记,因此首先创建一个空head元素。