11

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?

rredondo
  • 503
  • 1
  • 10
  • 19
user2243528
  • 425
  • 1
  • 3
  • 9

4 Answers4

32

The window object represents 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, self properties), and holds important interfaces such as applicationCache, XMLHttpRequest, setTimeout, escape, console or localStorage. Last but not least it acts as the global scope for JavaScript, i.e. all global variables are properties of it.

In contrast, the (window.)document object represents 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 forms collection, the cookie string, 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 getElementById or addEventListener.

Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
22

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

Junkster
  • 571
  • 1
  • 5
  • 10
  • Does each document in the tabs of a browser share the same browser's window? That sounds very insecure if one page can see another pages globals. Many tell it is open but not how it is open. I hope I have not exposed the security hole by my question. –  Oct 28 '19 at 02:18
3

JavaScript that runs in the browser has Window as it's top level. This means that global variables will become properties of 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 even contains itself so:

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.

HMR
  • 37,593
  • 24
  • 91
  • 160
1

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

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

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

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.

So window.x will have the value of 10.

alberto
  • 11
  • 3