DOM 树在 LIVE DOM 查看器的 BODY 部分而不是 HEAD 部分中显示标题标签？为什么会这样？答案

【问题标题】：The DOM tree is showing the title tag inside the BODY section and not in the HEAD section in the LIVE DOM viewer? Why is this happening?DOM 树在 LIVE DOM 查看器的 BODY 部分而不是 HEAD 部分中显示标题标签？为什么会这样？
【发布时间】：2015-07-21 00:58:32
【问题描述】：

为了检查 DOM 树的工作情况（实际上是检查如果我不按顺序放置标签或在不使用任何标签的情况下编写随机文本的情况下它是如何工作的），我接触了 LIVE DOM 查看器。

当我在文本之前写一个标题时，DOM 树以正确的方式在 HEAD 部分显示它：

输入：

<!DOCTYPE html>
<title>XYZ</title>
random text

输出（DOM 查看器显示的内容）：

DOCTYPE: html
 HTML
   HEAD
     TITLE
       #text: XYZ
         #text:
   BODY
       #text: random text

但是当我在标题标签之前写一段文字时，它会在 BODY 部分而不是 HEAD 中显示标题。为什么会这样？：

输入：

<!DOCTYPE html>
random text
<title>XYZ</title>

输出：

DOCTYPE: html
  HTML
    HEAD
    BODY
        #text: random text
        TITLE
        #text: XYZ
        #text:

【问题讨论】：

如果没有要运行的代码，请不要使用 StackSnippets。
“为什么会这样？” 很可能是因为两个 HTML sn-ps 都是无效的，浏览器会尽力修复它们。由于在<body> 标记之前不能有任何（非空）文本，它似乎将<body> 内的所有内容都移动了。

标签： html dom

【解决方案1】：

基本上，当解析器直接在头部看到一些文本时，insertion mode 会切换为“in body”，因此文本出现在 body 元素内。后面的title 元素不会移动到head，因为它已经被完全解析了。

具体来说，这段代码...

<!DOCTYPE html>
<title>XYZ</title>
random text

...解析如下：

插入模式最初设置为“initial”
解析器看到一个 DOCTYPE 标记。插入模式切换为“before html”。
解析器看到一个换行符，它被忽略了。
解析器有一个<title> 开始标签。一个html 元素被创建。插入模式切换为“before head”，重新处理token。
解析器有一个<title> 开始标记。插入了 head 开始标签。插入模式切换为“in head”，重新处理token。
解析器有一个<title> 开始标记。后面跟着generic RCDATA element parsing algorithm。
title 元素是inserted。插入模式切换为“text”。
解析器看到一些文本。字符是inserted。
解析器看到一个</title> 结束标记。 title 元素从打开的元素堆栈中弹出。插入模式切换到原来的模式。
解析器看到一些文本。 head 元素从stack of open elements 中弹出。插入模式切换为“after head”，重新处理token。
解析器看到一些文本。插入了 body 开始标记。插入模式切换为“in body”，重新处理token。
解析器看到一些文本。字符是inserted。
解析器看到一个文件结束标记。 The end

还有这段代码……

<!DOCTYPE html>
random text
<title>XYZ</title>

...解析如下：

插入模式最初设置为“initial”
解析器看到一个 DOCTYPE 标记。插入模式切换为“before html”。
解析器看到一个换行符，它被忽略了。
解析器看到一些文本。一个html 元素被创建。插入模式切换为“before head”，重新处理token。
解析器看到一些文本。插入了 head 开始标记。插入模式切换为“in head”，重新处理token。
解析器看到一些文本。 head 元素从stack of open elements 中弹出。插入模式切换为“after head”，重新处理token。
解析器看到一些文本。插入了 body 开始标记。插入模式切换为“in body”，重新处理token。
解析器看到一些文本。字符是inserted。
解析器看到<title> 开始标记。使用“in head”插入模式处理令牌。
解析器看到一个<title> 开始标签。后面跟着generic RCDATA element parsing algorithm。
title 元素是inserted。插入模式切换为“text”。
解析器看到一些文本。字符是inserted。
解析器看到一个</title> 结束标记。 title 元素从打开的元素堆栈中弹出。插入模式切换到原来的模式。
解析器看到一个文件结束标记。 The end

【讨论】：

不错！又学到新东西了:)
@Oriol 谢谢。还有一件事，text 是指没有任何标签或用<p>、<h1> 等标签编写的文本，而不是用<title> 或<noscript> 等元数据标签编写的文本，对吧？因为正如您所说，当解析器看到text 时，插入模式会切换到in body，这就是pt 中发生的事情。 7 在第二种情况下，它看到文本并完成 HEAD 而不插入任何内容。但是在第一种情况下，当HEAD被解析时，它看到标题标签中的text并没有切换到in body，而是在树中插入了文本，这是矛盾的吗？
当我说“文本”时，我的意思是random text 或XYZ（好吧，我认为解析器会逐个字符而不是整体地解析文本，但这并不重要）。但是是的，你是对的，如果文本在头部的 title 元素内，则插入模式不会切换到“in body”，我已经澄清了摘要。
好的，非常感谢 Oriol！这是一个很大的帮助:)。但是还有一件事，如果我写： !DOCTYPE some text 怎么办？在这种情况下，正如您所说，一旦解析器看到文本，头部标签就会从打开元素的堆栈中弹出，插入模式将更改为原始。那么现在如果它接下来看到一个封闭的标签怎么办？那么这个封闭标签会被插入到哪里呢？
@YoshitaArora 当解析器看到那个文本时，head 元素被关闭并且插入模式被切换到“in body”。那么</head>结束标签就是解析错误，被忽略了。