Window and Document

[00:00:00]
>> WebDevSimplified: Let us move on to the next section which is going to be talking about the DOM. So now we have the DOM object model. That's what the DOM stands for, and this is all about using JavaScript in the browser because everything we've talked about so far, it works whether you're in Node, the browser, desktop environment, the mobile environment, but now what we're talking about here only works inside the browser.

[00:00:19]
Now there's two fundamental objects inside the browser. We have the window object, which we kind of looked at a little bit, and the document as well. The window object is that global object. You know if we're inside of the browser and we console.log this, that is going to give us the window object. We can also access it by just typing in window, that's going to give us the exact same window object.

[00:00:40]
This is a global object that's available on every single page inside the browser and it gives us access to a ton of different things of this particular thing. And the important thing about the window object is every single global thing that you access inside a JavaScript is actually just on this window object. For example, console.log is the same as window.console.log. They do the exact same thing.

[00:01:01]
I can even prove that by just copying this code over. Paste that down, you notice it prints out hello twice, once up here for this one, and once down here for our window.console.log. So everything global that we're working with things like parent, parseFloat, console.log, they're all just part of this global window object that we're using inside of our entire application. We can even set our own variables on the window if we want to.

[00:01:25]
For example, I could say window.a is equal to one, and I can console.log window.a and that is going to print out one and I can even just console.log a and that'll still print one because if you use a variable and it doesn't have any other value to exist, it'll just default to getting the value directly from the window itself. So it's this massive global object that you can use to reference anything inside of your browser.

[00:01:49]
Now the nice thing is, since by default everything accesses the window, you generally don't need to type out the word window unless you have a conflict in names. So here we have an alert function that's built into JavaScript. If we call alert and we pass it in some code, it's going to give me an alert on the right hand side of my screen. But what happens if we have a variable also called alert, and we could set that equal to four?

[00:02:12]
Well, now this alert right here is trying to reference my variable up here. So that's the only case where I would need to specifically say I want to use the alert function from the window to reference that particular section. Otherwise you can just leave off the window portion, and that's what most people do. They just don't actually put that window portion because it's implied that's what you're actually trying to access.

[00:02:31]
Now the other thing that's really important is the document. Technically, as with everything, this is a portion of the window, the window.document, but most people just leave the window portion off and use document. If we try to console.log what the document is, you'll notice when I expand this, this just gives me the full HTML for our entire page that we have on the right hand side. So all of my HTML for my page shows up directly inside the document, and the document is the way that you reference and use all the different parts of your HTML page.

[00:03:00]
So we can get different parts of it and some of the more common parts that you're going to access is going to be the document element that'll give you the full HTML element. You're going to reference the body that gives you just the portion inside the body. The head will give you just the portion in the head, and the URL property will give you whatever the current URL you are on is. These are very common properties you're going to access from the document to do various different things.