HTML中html、head、body层级关系及document直接访问body的疑问

你对DOM层级的理解是完全正确的，实际DOM树的嵌套逻辑确实是：
document对象的根元素子节点是<html>（对应document.documentElement），<html>的子节点才是<head>和<body>。

我们可以直接用document.body访问目标节点，是DOM规范专门为高频操作设计的快捷访问语法糖，并没有改变实际的DOM层级关系：

• 早在DOM Level 2 HTML规范中就定义了document.body属性，它的底层实现逻辑就是直接查找document.documentElement下的<body>（如果是框架集文档则返回<frameset>），相当于帮开发者省略了手动定位<html>节点的步骤
• 同类的快捷属性还有document.head，可以直接获取<head>元素，不需要写document.documentElement.head。这类设计的初衷就是简化开发，毕竟<body>和<head>是前端开发中操作频率极高的顶层节点，每次都写全层级路径会非常繁琐
• 你提到的document.documentElement.body写法是完全合法可用的，两种写法拿到的是完全相同的DOM对象，可以在浏览器控制台执行以下代码验证：
  console.log(document.body === document.documentElement.body) // 输出结果为 true

内容的提问来源于stack exchange，提问作者yucelm