javascript 试图理解js中window和document对象的区别

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17227008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 07:32:58  来源:igfitidea点击:

trying to understand the difference between window and document objects in js

javascript

提问by user2243528

I am trying to understand the difference between window and document objects in js. I checked online, but I still don't have a clear understanding. From what I know: window is like a super document, it includes the document object. So if I use firefox to open one page: localhost/test.js, can I say the browser:firefox is window object, and the file test.js is the document object?

我试图了解 js 中窗口和文档对象之间的区别。我在网上查了下,还是没有很清楚的了解。据我所知:window就像一个超级文档,它包含了文档对象。所以如果我用firefox打开一个页面:localhost/test.js,可以说browser:firefox是window对象,文件test.js是document对象吗?

回答by Bergi

The windowobjectrepresents the current browsing context. It holds things like window.location, window.history, window.screen, window.status, or the window.document. Also, it has information about the framing setup (the frames, parent, top, selfproperties), and holds important interfaces such as applicationCache, XMLHttpRequest, setTimeout, escape, consoleor localStorage. Last but not least it acts as the global scope for JavaScript, i.e. all global variables are properties of it.

window对象表示当前浏览上下文。它拥有之类的东西window.locationwindow.historywindow.screenwindow.status,或window.document。此外,它具有关于成帧设置(的信息framesparenttopself的属性),并保持重要的接口,如applicationCacheXMLHttpRequestsetTimeoutescapeconsolelocalStorage。最后但并非最不重要的是,它充当 JavaScript 的全局范围,即所有全局变量都是它的属性。

In contrast, the (window.)documentobjectrepresents the DOM that is currently loaded in the window- it's just a part of it. A document holds information like the documentElement(usually <html>), the formscollection, the cookiestring, its location, or its readyState. It also implements a different interface (there might be multiple Documents, for example an XML document obtained via ajax), with methods like getElementByIdor addEventListener.

相比之下, ( window.)document对象表示当前加载的 DOM window- 它只是其中的一部分。一个文档包含诸如documentElement(通常<html>)、forms集合、cookie字符串、它的location或它的 之类的信息readyState。它还实现了一个不同的接口(可能有多个Documents,例如通过 ajax 获取的 XML 文档),使用类似getElementById或 的方法addEventListener

回答by Junkster

A very detailed explanation: Read here

一个非常详细的解释:阅读这里

Basically window is your browser's window and document is the HTML page inside it. enter image description here

基本上 window 是您浏览器的窗口,而 document 是其中的 HTML 页面。 在此处输入图片说明

回答by HMR

JavaScript that runs in the browser has Window as it's top level. This means that global variables will become properties of window:

在浏览器中运行的 JavaScript 具有 Window 作为它的顶级。这意味着全局变量将成为 window 的属性:

// this code is not inside a function
var global1=22;
function test(){
  var local=88;
  window.global2=99;
  console.log(local);//logs 88 because
    // local is available within the body
    // of this function
  console.log(global1);//logs 22
}
console.log(typeof local);//logs undefined becaue were
  // outside the funciton body
test();
console.log(global2);//logs 99 because we added
   // global2 as a property of window

So window will contain all your global objects, this means that: parseInt does the same as window.parseInt.

因此 window 将包含您所有的全局对象,这意味着: parseInt 与 window.parseInt 的作用相同。

Window even contains itself so:

Window 甚至包含自身,因此:

window===window.window.window;//is true

window does not have a getElementById, children, childNodes ... funciton because window is not an Html element and document is.

window 没有 getElementById、children、childNodes ... 函数,因为 window 不是 Html 元素而 document 是。

回答by alberto

JavaScript applications have context, a scope where values are defined. The 'root' or 'global' object in the case of a browser is window.

JavaScript 应用程序具有上下文,即定义值的范围。在浏览器的情况下,“根”或“全局”对象是window.

The windowobject has a property (a variable) called documentwhich stores a representation of the document. The document holds a model representation of the currently loaded document (such as title, anchors, etc). The windowobject represents the browser window where your document is displayed.

window对象有一个属性(一个变量)被调用document,它存储文档的表示。该文件保存当前加载的文档的模型表示(例如titleanchors等)。该window对象表示显示文档的浏览器窗口。

Also, if you in a script that is not in a function you define something like:

此外,如果您在不在函数中的脚本中定义如下内容:

var x = 10;
var x = 10;

Really what you have done is define a variable in the global object. In the browser case this will be in window.

实际上你所做的是在全局对象中定义一个变量。在浏览器的情况下,这将在window.

So window.xwill have the value of 10.

因此window.x将具有 10 的值。