理解浏览器的window对象和document对象

1 分钟读完

document对象是什么?

我觉得要理解document对象,最好从它的使用场景入手,什么情况下我们会需要它?在使用JavaScript的时候,考虑以下几种需求:

  • 在网页中获取当前DOM中的某一个特定的节点
  • 获取某一个节点的所有子节点
  • 获取当前页面URL/URL中的路径/contentType(文档类型)…
  • ……

这种情况下,我们就需要和DOM树相关的API,即我们需要的属性/方法,进行其他操作。
而document对象所代表的其实就是当前的DOM树,所以我们通过它可以获取与文档相关的API
这个对象是供JavaScript使用的。(毕竟JavaScript就是来操作DOM的)

window对象是什么?

首先,document对象是window对象的一个属性,所以是不是有些明白了?
对于document来说,它代表DOM树,而window则代表包含当前DOM的窗口,所以我们可以通过window对象的属性和方法,来进行其他操作。 ***

document和window对象的使用

document和window对象具有的属性和方法非常非常多(而且也在不停的更改变化),可以说想要记住所有的是不现实的,我们需要做的,就是知道这两种对象的使用场景和使用范围,比如我们想要进行的一个操作是和DOM树相关的(比如增加一个节点),就可以去查阅官方文档,找到对应的API,学习其使用方法,了解其兼容性,然后在自己的项目中使用。window对象也是同理。

但是虽然记住所有的API不现实,但是有一些API却是我们经常使用的,这里所指的“经常”,可能和每个开发者的水平,开发的项目类型而有所不同。
对于水平有限者来说比较大的问题,就是有时候我们不知道有些属性和方法是否已经由原生window,document对象提供了,就像你在打造一个产品的过程中,你不知道是否已经有人提供了相应的工具和资料可以供你使用和查阅,于是有的工具你就选择自己去做,有的功能你可能就实现不了。而对于这种情况,我有以下一些看法:

  • 理解windowdocument的使用范围,当你想要进行的操作是和文档相关,自然就应该去考虑查阅document对象。
  • 灵活使用浏览器的控制台,在控制台中可以实时查看网页的所有对象的细节。
  • 遇到疑问经常查阅官方文档,毕竟经常使用的并不算多,查个几次就能大致掌握了。

更新时间: