我觉得这可能与对象引用有关，但这里是:
我有以下代码:
<html>
<head>
<script type="text/javascript">
console.log(document.getElementsByTagName("html"));
console.log(document.getElementsByTagName("html")[0].lastChild);
</script>
</head>
<body><h1>Hello</h1></body>
</html>
在控制台中，当我展开返回的第一个集合时，我可以看到它有 body 作为它的子节点 (lastChild)，即使 body 元素还没有被解析。但是在第二个对象中，它显示了 head 标签，这符合预期。
现在，在此处发布这个问题时，我创建了这个 pen但那里的第二个控制台是 body 标签而不是头部。
那么，为什么第一个控制台语句在 html 中显示正文？或者它必须与浏览器做些什么？谢谢
最佳答案
getElementsByTagName 将为您提供一个实时 HTMLCollection。这意味着，当底层 DOM 发生变化时，函数返回的实时集合也会发生变化。
An HTMLCollection in the HTML DOM is live; it is automatically updated when the underlying document is changed.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
所以最初，在记录发生时，body 标签仍然没有被解析。如果您可以在解析正文之前检查控制台输出，您就不会在那里看到它。
但是当您真正开始在控制台中检查 HTMLCollection 时，body 已经被解析并因此显示(因为 HTMLCollection 再次处于事件状态)。
如果你想“中断”实时连接，你可以使用数组扩展运算符将你的 HTMLCollection 转换为标准数组:
const collection = [...liveCollection];
显然，第二个 console.log 打印了 head 标签，因为在它被记录时，它确实是最后一个 child 。
仅供引用
getElementsByClassName 等其他常见 DOM 查询函数也可以为您提供实时集合。
关于javascript - 为什么这个 HTML 标签甚至在 body 加载之前就将 body 作为它的 lastChild，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42282801/