window 是浏览器全局对象,代表窗口或标签页;document 是其属性,代表 HTML 文档并提供 DOM 操作入口;document.documentElement 指向 <html> 元素,用于获取/设置页面样式相关属性。

window 是浏览器的全局对象,代表整个浏览器窗口或标签页,所有全局变量和函数(比如 alert、setTimeout)都挂载在它上面。它是 JavaScript 运行的顶层宿主环境。
document 是 window 的一个属性,代表当前页面的 HTML 文档
它提供了操作 DOM 的入口,比如 document.getElementById()、document.querySelector()。它不是全局对象,但通过 window.document 可以访问。页面加载完成后才可用,早期脚本中直接使用可能为 null。
document.documentElement 是 document 的一个只读属性,指向 <html> 元素
它是文档根元素(即 <html> 标签本身),常用于获取或设置整个页面的样式相关属性,例如:
-
document.documentElement.clientWidth获取视口宽度(不含滚动条) -
document.documentElement.scrollTop获取/设置页面垂直滚动位置(兼容性比window.pageYOffset更好) -
document.documentElement.classList.add('dark')给<html>添加类名,影响全站样式
常见混淆点辨析
– window 和 document 不是同一对象:window !== document,但 window.document === document;
– document.documentElement 是一个 Element 对象,而 document 是 Document 对象;
– 获取视口高度时,document.documentElement.clientHeight 比 document.body.clientHeight 更可靠(body 可能受 margin、CSS 影响);
– 在 iframe 中,每个 frame 都有自己独立的 window、document 和 documentElement。










