console.log(document.head) 结果在每次刷新时交替出现

【问题标题】：console.log(document.head) results alternate with each refreshconsole.log(document.head) 结果在每次刷新时交替出现
【发布时间】：2013-11-28 18:23:02
【问题描述】：

我刚刚发现了一件让我非常困惑的事情：

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <title></title>
    </head>
    <body>
      <script type="text/javascript">
        console.log(document.head);
      </script>
    </body>
  </html>

每次我在 Safari 和 Chrome 中刷新此页面时，控制台输出都会在 JavaScript“HTMLHeadElement”和 HTML 本身之间交替。

有人愿意详细说明吗？

【问题讨论】：

作为记录，这里有一个 webkit 错误：bugs.webkit.org/show_bug.cgi?id=115800

标签： javascript html google-chrome safari webkit

【解决方案1】：

我在 Chrome 中尝试了这个实验并得到了相同的结果。我的猜测是 webkit 实现中的某种解析竞争条件。

当我修改代码以不立即运行代码时，我可以获得一致的结果。

<script type="text/javascript">
    setTimeout(function() { console.log(document.head) } , 0);
</script>

控制台会显示带有展开/折叠三角形的 HTML，因此可能是一个对象。

<head>
    <title></title>
</head>

如果我添加了.outerHTML，我也会在那里得到一致的结果，将 HTML 记录为字符串。

<script type="text/javascript">
    console.log(document.head.outerHTML);
</script>

最后，添加.toString() 将始终记录[object HTMLHeadElement]

<script type="text/javascript">
    console.log(document.head.toString());
</script>

【讨论】：