設置document.body.outerHTML會創建空頭。為什么？

Question

重置document.body outerHTML屬性有一個奇怪的副作用：它在DOM中添加額外的空<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>

所有瀏覽器似乎都是一致的。 我被告知它被指定為這種方式，但是無法在這個問題上挖掘權威的標准立場，甚至在討論檔案中都沒有提及。 你知道這方面的背景嗎，還是有一些技術原因必須這樣？ 任何想法？

Answer 1

有趣的問題。 遺憾的是，解釋隱藏在HTML片段解析算法的細節中，該算法從DOM解析規范中的outerHTML的定義中引用。

您需要非常仔細地遵循解析器狀態以查明原因，但實際上它的工作原理與此類似。 使用outerHTML，解析器被初始化，就像它剛剛解析了給定節點的父節點的開始標記一樣。 對於document.body，這是html元素。

在HTML解析算法中，當解析html開始標記時，解析器期望的下一個是head元素。 但是因為在HTML中，head元素的開始和結束標記是可選的，如果它接下來沒有看到head start標記，則它會推斷出一個。 因此，對於document.body.outerHTML，解析器看到的下一件事是body start標記，因此首先創建一個空頭元素。

最后，一旦解析了片段，整個批次（包括推斷的head元素）就會被添加到DOM中。

設置document.body.outerHTML會創建空頭。為什么？

問題描述

1 個解決方案

解決方案1
3 已采納 2018-10-20 08:39:22

設置document.body.outerHTML會創建空頭。 為什么？

問題描述

1 個解決方案

解決方案1 3 已采納 2018-10-20 08:39:22

設置document.body.outerHTML會創建空頭。為什么？

解決方案1
3 已采納 2018-10-20 08:39:22