在JavaScript中,window 和 document 是两个非常重要的全局对象,分别代表浏览器窗口和文档内容。它们各自有不同的属性和方法,用于操控网页的不同方面。以下是它们的区别和详细解释:
window 对象
window 对象代表浏览器窗口,是所有全局变量和函数的宿主对象。它提供了多种属性和方法来操控浏览器窗口、处理事件、进行导航等。
主要属性和方法
-
属性:
window.innerWidth和window.innerHeight: 浏览器窗口的内部宽度和高度(不包括工具栏和滚动条)。window.location: 当前文档的URL信息,可以用来获取和设置URL。window.history: 允许操作浏览器的历史记录(前进、后退)。window.navigator: 提供浏览器的信息(例如用户代理字符串、地理位置)。window.screen: 提供屏幕的信息(例如屏幕的宽度和高度)。
-
方法:
window.alert(message): 显示一个带消息的警告框。window.confirm(message): 显示一个带确认和取消按钮的对话框。window.open(url, target): 打开一个新的浏览器窗口或标签。window.setTimeout(function, delay): 在指定的延迟后执行一个函数。window.setInterval(function, interval): 每隔指定的时间间隔执行一个函数。
document 对象
document 对象代表当前加载的HTML文档,是文档对象模型(DOM)的入口点。通过它可以访问和操作HTML内容。
主要属性和方法
-
属性:
document.title: 获取或设置文档的标题。document.body: 获取文档的<body>元素。document.head: 获取文档的<head>元素。document.cookie: 获取或设置与当前文档相关的cookies。
-
方法:
document.getElementById(id): 根据ID获取元素。document.getElementsByClassName(className): 根据类名获取元素集合。document.getElementsByTagName(tagName): 根据标签名获取元素集合。document.querySelector(selector): 使用CSS选择器获取第一个匹配的元素。document.querySelectorAll(selector): 使用CSS选择器获取所有匹配的元素集合。document.createElement(tagName): 创建一个新的元素节点。document.write(content): 向文档写入内容(通常不推荐使用)。
区别总结
| 特点 | window 对象 | document 对象 |
|---|---|---|
| 代表 | 浏览器窗口 | 当前加载的HTML文档 |
| 主要作用 | 操控浏览器窗口、处理事件、导航等 | 访问和操作HTML内容、DOM元素 |
| 常见属性 | innerWidth, innerHeight, location, history, navigator, screen | title, body, head, cookie |
| 常见方法 | alert, confirm, open, setTimeout, setInterval | getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll, createElement, write |