window和document的区别

6 阅读2分钟

在JavaScript中,windowdocument 是两个非常重要的全局对象,分别代表浏览器窗口和文档内容。它们各自有不同的属性和方法,用于操控网页的不同方面。以下是它们的区别和详细解释:

window 对象

window 对象代表浏览器窗口,是所有全局变量和函数的宿主对象。它提供了多种属性和方法来操控浏览器窗口、处理事件、进行导航等。

主要属性和方法

  • 属性:

    • window.innerWidthwindow.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, screentitle, body, head, cookie
常见方法alert, confirm, open, setTimeout, setIntervalgetElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll, createElement, write