In this section, we're going to look at how we can work with the DOM. Now first, we need to describe what the DOM is. Now, I've mentioned several times throughout this course, that JavaScript can be used in multiple environments. The browser just happens to be one of the environments that JavaScript is available. And there's other environments as well. However, the browser is the most common environment.
And because we can write JavaScript in the browser, because we can work with HTML pages, we have a section in the Getting Started course on working with the DOM. That is where the DOM exists. Now, when you open a web page in your browser, the browser retrieves the HTML and it parses it and builds up a model of the document structure. Now the model of that document structure that we're able to work with you using JavaScript is what we call the DOM. Now let me present some concepts that are important in understanding what the DOM is. First off, Dom is an acronym that stands for Document Object Model.
As you can see, it's the first letter from each of those words. Dom, as I mentioned, is a representation of the documents, HTML structure. And that structure or that representation describes relationships. Within the HTML. Those relationships are described using familial terms, such as parent, child, sibling. Those types of terms are what we use to refer to the relationships among DOM objects.
Now, the DOM is a live data structure now what do I mean by that? Well, that simply means that not only can we read information about the structure, but we can change the structure. And when we change the structure, it changes the HTML page, which is currently showing in the browser. So that's an exciting part of being able to work with the DOM using JavaScript. Now, each element, each HTML element is represented as an object, hence the name document object model. So since they are objects, they're going to have attributes.
And we can change things about those objects. And that's why it's a live data structure. That's how we can manipulate the DOM. Finally, the DOM is an API. API stands for application programming interface. This is an interface to the HTML page.
It allows us to Changes to and read from the HTML page. And it's an API for both CSS and JavaScript. So CSS uses the DOM as well, to access parts of the HTML page. And to style those parts with JavaScript, we're accessing the parts of the HTML page. And we're doing something with them from a functional perspective. Now, it is also possible with JavaScript to change CSS attributes that are associated with an element in the DOM.
And we will be looking at that as well. Now, those are some important concepts about the DOM. Now let's look at a sample HTML page and how this gets represented in a document object model structure. So up here on the top, this is a very simple HTML page. We have the HTML tag which encloses the whole thing We then have a head tag and inside the head tag is a title. And the title for this page is sample page.
We then have a body tag. And inside the body tag, we have an h1 tag. And then we have a div tag. And then inside that div tag, we have a paragraph tag with some text. This is a sample HTML page, and another paragraph tag, which says, by all things JavaScript, part of that paragraph tag is also broken into an a tag, which is a link to the web page all things JavaScript. Now when this HTML page gets loaded in the browser and is parsed, it then breaks out the different elements of HTML page into objects, which we can interact with using JavaScript.
And this diagram down here at the bottom represents those objects. So HTML would be at the top, that is the top most object and then inside If that we have two children, this is the familiar terms that we use to describe these. We have a head and a body, those are siblings, those are on the same level. So therefore they're siblings. So directly inside of HTML, we have head and body. And then inside of each of those, it breaks down even further.
So the children have HTML our head and body, the children have had, or child have had his title. The children of body we have h1 and div the children of div we have two p tags. And the children child have this p tag is an E tag. So those are created into objects which we can then access using JavaScript. Now each one of these is referred to as a node. And that's important to remember because node is used in some of the commands that We use within JavaScript to manipulate the document object model.
So important concepts, each one is a node. A node can have children or child nodes. A node can also have a sibling. When tags are on the same level, they are considered siblings. When tags are nested, inside another tag, they're then considered children. Now these are important concepts for understanding the DOM and working with the DOM.
Now before we conclude this introductory movie, I want to open up the console for just a second. Now we introduced to you this in an earlier movie, and it comes back it displays the window. Now we can access the document that is loaded into the browser using This document. Now if I open that up, we can see the structure we've been talking about. Here's the HTML. Here's the head tag, we can open up and see what's inside that here's the body tag, and we can open that up and see what's inside the body tag.
So that represents the structure. So right here, you can see we're able to access the DOM. Now, instead of entering this document, I could also enter window dot document. That's the same thing. But even a shortcut as I can just enter document, and it assumes the current window, the current global object. And we basically get the same, same information.
Now one more thing I want to show you, as mentioned, these are objects and so they have attributes. Well, the document As the title attribute, we can get the title of the page and it's learned modern JavaScript getting started, we could also change the title of the page. So all of the attributes that are a part of the nodes in the document object model are readable and writable, meaning we can get the information and we can change the information. Now, I just changed the title of this page. To show you that happened. Let me just reduce this page a bit.
And you can see in the tab, the title now displays This is a test. Alright, let's move on to the next topic.