【基本概念】document / documentElement / html 和 body?

document / documentElement / html 和 body?

1. document

说到document一定要先提 DOM：document object model，翻译过来就是文档对象模型。

借用 DOM 是什么？ - 果冻公开课的回答 - 知乎 的回答：

用户在浏览器输入URL之后，发生了这些事情：

输入的网址在通过DNS解析后得到服务器地址
浏览器向服务器发起http请求，经过TCP/IP三次握手确认链接后，服务器将需要的代码发回给浏览器。
浏览器接收到代码后进行解析，经过三大步骤：
DOM构造、布局以及绘制页面，最终展现为人人都能看懂的网页。

浏览器首先将获取到的html代码，通过html解析器解析构建为一颗DOM树，并以window.document(可以简写为document)的形式，以一个JavaScript 对象的形态存在在window全局作用域。

2. html 和 body

DOM树的结果示意图如下所示：其中html一定是根元素。head表示网页的一些属性，信息，而body表示网页的结构、内容。因为head标签的内容是不会展示在页面上的，所以一般html元素的大小就是body元素的大小。

3.documentElement

documentElement是document对象的一个属性，表示DOM树的根元素(也就是html)，可以通过document.documentElement来获取。因此 document.documentElement和document.querySelector('html')是一样的。