window和document

最新推荐文章于 2025-03-21 11:09:51 发布

白菜写代码

最新推荐文章于 2025-03-21 11:09:51 发布

阅读量235

点赞数 8

分类专栏：前端探索文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/Lemom_5269/article/details/143027060

版权

前端探索专栏收录该内容

6 篇文章

订阅专栏

前言

最近刚刚进入开发阶段，实现一个小功能的时候会用到gpt，结果给出的答案有的时候使用document.addEventListener有的时候使用window.addEventListener，作为一个职场小白有的时候真的会忽略最基础的问题，因此今天主要总结一波window和document的区别

window是什么

window 是浏览器的全局对象，表示浏览器的窗口或框架。它是 JavaScript 的顶层对象，所有的 JavaScript 全局变量和函数都是 window 对象的属性。
它提供了与浏览器环境交互的方法，例如控制浏览器的加载、调控窗口的位置和尺寸、处理定时器、管理浏览器历史等。
window 提供了全局方法和属性，如 alert()、setTimeout()、localStorage 和 sessionStorage。
表示浏览器窗口，以及其它浏览器相关的信息和控制。

  // 弹出警告框
  window.alert("Hello, World!");

  // 设置定时器
  window.setTimeout(() => {
    console.log("This message will be logged after 2 seconds.");
  }, 2000)

document是什么

document 是 window 对象的一个属性，表示当前网页（文档）的 DOM（文档对象模型）。它提供了用于访问和操作 HTML 和 XML 文档的接口。
可以使用 document 来操作页面中的元素，比如创建、修改、删除元素，以及读取和更新内容和属性等.
提供了操作 DOM 的方法，如 getElementById()、createElement()、querySelector() 等。
允许访问和修改网页的内容和结构。

  // 获取元素并改变其内容
  document.getElementById('myElement').innerText = 'Hello, DOM!';
  
  // 创建新元素并添加到 DOM
  const newElement = document.createElement('div');
  newElement.innerText = "I'm a new div!";
  document.body.appendChild(newElement);