JavaScript中的window和document对象

Mi Sol

已于 2025-03-21 14:21:16 修改

阅读量475

点赞数 12

文章标签： javascript 开发语言 ecmascript

于 2025-03-21 11:09:51 首次发布

本文链接：https://blog.csdn.net/oldthirty/article/details/146415846

版权

在JavaScript中，document和window是两个核心对象，但是它们的职责和用法完全不同，以下是它们的主要区别和使用场景。

1. `window` 对象

定位：代表浏览器窗口，是全局对象（BOM 的核心）。
作用范围：
- 所有全局变量和函数都是 window 的属性（例如 var a = 10 → window.a）。
- 控制浏览器行为（导航、弹窗、定时器等）。
典型用途

// ❌ 错误：试图用 window 操作 DOM
window.getElementById("id");  // undefined

// ✅ 正确：使用 document
document.getElementById("id");

注：BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。

DOM（Document Object Model ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。

2. `document` 对象

定位：代表当前加载的 HTML 页面（DOM 的入口）。
作用范围：
- 操作页面元素（增删改查 DOM）。
- 访问页面内容（标题、Cookie 等）。
典型用途：

// 获取元素
const element = document.getElementById("myDiv");
const elements = document.querySelectorAll(".class");

// 修改内容
element.textContent = "新内容";
document.title = "新标题";

// 创建新元素
const newElement = document.createElement("div");
document.body.appendChild(newElement);

3. 关键区别

特性	`window`	`document`
层级关系	顶级对象，包含 `document`	`window` 的子对象
用途	控制浏览器窗口	操作页面内容
全局性	全局作用域中的变量属于 `window`	仅操作当前文档
典型方法	`setTimeout()`, `alert()`	`getElementById()`, `querySelector()`

4. 关系示意图

window
  ├── document       // 当前页面
  ├── location       // URL 信息
  ├── navigator      // 浏览器信息
  └── setTimeout()   // 定时器

常见误区

混淆方法：

// ❌ 错误：试图用 window 操作 DOM
window.getElementById("id");  // undefined

// ✅ 正确：使用 document
document.getElementById("id");

2. 作用域陷阱：

function test() {
  var x = 10;        // 等价于 window.x（全局作用域）
  let y = 20;        // 块级作用域，不属于 window
}

总结

操作浏览器 → 用 window
操作页面内容 → 用 document
记住：document 是 window 的一个属性，两者协作完成 Web 交互。