在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 |