myf*_*myf 7 html javascript dom outerhtml
重置outerHTML属性document.body有一个奇怪的副作用:它<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); }<button onclick="document.body.outerHTML=document.body.outerHTML"></button>所有浏览器似乎都是一致的.我被告知它被指定为这种方式,但是无法在这个问题上挖掘权威的标准立场,甚至在讨论档案中都没有提及.你知道这方面的背景,还是有一些技术原因必须这样？任何的想法？
有趣的问题。不幸的是，解释被隐藏在HTML 片段解析算法的细节中，该算法是从DOM 解析规范中的externalHTML定义中引用的。
您需要非常仔细地跟踪解析器状态才能了解原因，但本质上它是这样工作的。对于outerHTML，解析器被初始化，就好像它刚刚解析了给定节点父节点的开始标签一样。对于 document.body，这就是html元素。
在 HTML 解析算法中，当html解析开始标记时，解析器期望的下一个元素是head元素。但是，由于在 HTML 中，head 元素的开始和结束标记是可选的，因此如果接下来没有看到 head 开始标记，则会推断为一个。因此，对于 document.body.outerHTML，解析器接下来看到的是body开始标记，因此首先创建一个空的 head 元素。
最后，一旦解析了片段，整个片段（包括推断的头元素）就会添加到 DOM 中。