when we're working with sibling, parent, and child elements. So again, the DOM is just your HTML, which is interactive and can be modified with JavaScript. So if we go into the Console tab here, if you remember, the window object is global and has a bunch of properties related to this specific window. So for example, window.innerWidth or innerHeight has the width of this window. Or maybe window.location has information about the URL, the protocol, the host, and so on. Now if you just console.log window itself, there is a property on it named document. So let me just open this up and look for document somewhere down here. There it is. And you can see that it's highlighting the entire page.

There it is. And you can see that it's highlighting the entire page. So this is basically your DOM. So if I open this up, you'll see a bunch of properties on the document object. And we'll take a look at some basic ones here in this video. So let me just clear this out. We have simple ones like document.head to get everything within the head tag. So if I open this up, we should see the title as well. We can get the body with document.body. And you can see Chrome is highlighting here in the browser.

We can get the body with document.body. And you can see Chrome is highlighting here in the browser. We can get the title. So the title is working with the DOM. And we can actually change it. So if I do document.title, we'll get working with the DOM. But if we change it, document.title equals hello, that should change it. So this is an example of JavaScript changing the DOM. And you can see the title change here. We can grab the doc type, which should be just HTML doc.

You can just think of it as an array. And each item is one of the elements in the DOM. So you can see we have HTML head, title, body, and so on. Again, this represents all of our HTML in here. Actually, this one here is the one that's showing right now. Let me just switch over to another document I have prepared here, which has a few more elements. It has some forms, some links, and some images. So let me open up DevTools again. Actually, let me show you the HTML for that.

So let me open up DevTools again. Actually, let me show you the HTML for that. We can see it in the Elements tab. Actually, let me just show it to you in my code. So we have some links here. We have two forms, and we have two images. Okay. Let's go back to the console here. So we can do things like grab all of the links on the page, so all of the anchor tags.

So we can do things like grab all of the links on the page, so all of the <a> tags. So in this case, both of our <a> tags here. So we can do that using document.links. And again, we get this HTMLCollection, which you can think of as an array. And if I hover over these items, you'll see that it hovers or it highlights in the browser. So we have one here for a link to LetterCasts and another one with a link to Google. We can do something similar for forms.

And you can do the same thing as well with document.images. And we have these two images here. Cool. So again, these are elements on the page, and they are interactive, and I can make changes to them using JavaScript. So for example, if I wanted to get rid of this image here, we can say document.images. Again, this is similar to an array, so we can say square bracket zero to grab the first one. Okay.

so we can say squareBracket 0 to grab the first one. Okay. And we can use the remove method to remove it from the DOM. So if I hit enter here, that should remove it from the DOM. And it does. Let me just bring that back and refresh the page. Say I wanted to do something similar but hide it with some inline CSS using display: none. So let's do something similar. Let me just press up to bring back that last command.

Okay. You can see it's hidden now, but it should still be in the DOM. So if I check the elements tab, if I look for this one, you'll see that the one I hid is right here, and you can see the inline style that I added right here. What else can we do here? We can grab the scripts on the page. So I believe I have one script here that's loading lodash. So we can grab the scripts using document.scripts. And you can see there are two here.