Javascript中的窗口,屏幕和文档有什么区别?

2020/10/09 23:21 · javascript ·  · 0评论

我看到这些术语可以互换使用,作为DOM的全局环境。有什么区别(如果有的话),什么时候应该使用每一个?

Windowglobal object浏览器中主要的JavaScript对象根(也称为),也可以视为文档对象模型的根。您可以通过以下方式访问它window

window.screen或者只是screen有关物理屏幕尺寸的小信息对象。

window.document或仅仅document是潜在可见(或更好:呈现)的文档对象模型/ DOM的主要对象。

由于window是全局对象,因此您可以仅使用属性名称来引用它的任何属性-因此您不必写下来window.-它会在运行时确定。

好吧,窗口是首先加载到浏览器中的东西。此窗口对象具有大多数属性,如length,innerWidth,innerHeight,name,是否已关闭,其父级等等。

那文档对象呢?该文档对象是您的html,aspx,php或其他将加载到浏览器中的文档。该文档实际上已加载到window对象内部,并且具有可用的属性,例如标题,URL,cookie等。这实际上是什么意思?这意味着如果要访问窗口的属性是window.property,如果是文档,则是window.document.property,也可以简称为document.property。

dom

这似乎很简单。但是,一旦引入IFRAME,会发生什么?

iframe

window是实际的全局对象。

screen是在屏幕上,它包含了用户的显示性能。

document是在DOM是。

简要地,下面有更多详细信息,

  • window 是该上下文的JavaScript的执行上下文和全局对象
  • document 包含通过解析HTML初始化的DOM
  • screen 描述物理显示器的全屏

有关这些对象的详细信息,请参见W3CMozilla参考。这三个之间最基本的关系是,每个浏览器选项卡都有自己的window,并且window具有window.documentwindow.screen属性。浏览器选项卡window是全局上下文,因此documentscreen指代window.documentwindow.screen有关这三个对象的更多详细信息,请参见Flanagan的JavaScript:《权威指南》

window

每个浏览器选项卡都有其自己的顶级window对象。每个<iframe>(和已弃用的<frame>)元素也都有自己的window对象,它们嵌套在父窗口中。这些窗口中的每一个都有其自己的单独全局对象。window.window始终指window,但window.parentwindow.top可能指封闭的窗口,从而可以访问其他执行上下文。除了documentscreen下面所描述的,window属性包括

  • setTimeout()并将setInterval()事件处理程序绑定到计时器
  • location 提供当前网址
  • history方法,back()forward()提供标签的可变历史记录
  • navigator 描述浏览器软件

document

每个window对象都有一个document要渲染对象。这些对象之所以会造成混乱,部分原因是当分配了唯一ID时,会将HTML元素添加到了全局对象中。例如,在HTML代码段中

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

段落元素可以被以下任何一种引用:

  • window.holyCow 要么 window["holyCow"]
  • document.getElementById("holyCow")
  • document.querySelector("#holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

window对象还具有一个screen对象,对象的属性描述了物理显示:

  • 屏幕属性widthheight全屏

  • 屏幕属性availWidthavailHeight省略工具栏

屏幕上显示呈现的文档的部分是JavaScript中视口,这可能会造成混淆,因为在谈论与操作系统的交互时,我们将应用程序的屏幕部分称为窗口。getBoundingClientRect()任何的方法,document元件将返回一个对象与topleftbottom,和right描述在视口中的元件的位置的特性。

window包含一切,所以你可以打电话window.screenwindow.document得到这些元素。查看这个小提琴,漂亮地打印每个对象的内容:http : //jsfiddle.net/JKirchartz/82rZu/

您还可以在firebug / dev工具中查看对象的内容,如下所示:

console.dir(window);
console.dir(document);
console.dir(screen);

window是所有内容的根,screen仅具有屏幕尺寸,并且document是顶级DOM对象。因此您可以将其视为window超级document...

窗口是加载到浏览器中的第一件事。此窗口对象具有大多数属性,如length,innerWidth,innerHeight,name,是否已关闭,其父级等等。

该文档对象是您的html,aspx,php或其他将加载到浏览器中的文档。该文档实际上已加载到window对象内部,并且具有可用的属性,例如标题,URL,cookie等。这实际上是什么意思?这意味着如果要访问窗口的属性是window.property,如果是文档,则是window.document.property,也可以简称为document.property。

本文地址:http://javascript.askforanswer.com/javascriptzhongdechuangkoupingmuhewendangyoushenmequbie.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!