-: So in this section,
we're going to make JavaScript interact
with a webpage for the very first time.
And the technical term for that is doing DOM Manipulation.
Now, in the last lecture,
you already selected an element from a page.
And what that means is that you, kind of,
interacted with the DOM already.
So in this lecture,
let's learn what the DOM actually is and how it works.
So what is the DOM actually?
Well, DOM stands for Document Object Model, and it is,
basically, a structured representation of HTML documents.
The DOM allows us to use JavaScript to access HTML elements
and styles in order to manipulate them.
For example, we will be able to change text,
to change HTML attributes and also to change
CSS styles from our JavaScript.
So we can say that DOM is basically a connection point
between HTML documents and JavaScript code.
Now, the DOM is automatically created
by the browser as soon as the HTML page loads.
And it's stored in a tree structure like this one.
In this tree, each HTML element is one object.
And so let's now take a look at this DOM structure
in a little bit more detail.
And to illustrate this here is a very simple HTML document,
and here is what a DOM tree
corresponding to this HTML looks like.
So, as I already mentioned, this is a tree structure,
which looks a bit like a family tree, right?
And actually we used the terms, child element,
parent element, sibling element and so on,
when we talk about the DOM tree and DOM manipulation.
Anyway, as you can see for each element in the HTML,
there is one element node and the DOM tree,
and we can access and interact
with each of these nodes using JavaScript.
Okay, so the DOM always starts with the document object,
right at the very top.
And document is a special object
that we have access to in JavaScript.
And this object serves as an entry point into the DOM.
Remember how you used document dot query selector
in the last lecture to select an element.
So that means that the query selector method
is available on the document object.
And so that's why we say that document
is the entry point to the DOM,
because we need it to start selecting elements.
All right, then the first child element of document
is usually the HTML element, because that's usually
the root element in all HTML documents.
Next, HTML usually has two child elements, head and body.
And so of course you can also
find them here in the DOM tree.
In the HTML, they are adjacent elements,
and so they are siblings in our DOM as well.
Then, as we keep going deeper
into the nested HTML structure,
we keep adding more and more children to the DOM tree.
So inside head and body, you have more child elements,
and the two sections and the body,
even have child elements themselves.
And from there, it goes even deeper
because the first paragraph also has a child,
which is this link element here.
And with that, finally,
we have all our HTML elements in the DOM tree.
But a Dom tree actually has more than just element nodes.
It also has nodes for all the text itself,
comments and other stuff,
because basically the rule is that
whatever is in the HTML document also has to be in the DOM.
And so, as you see, the DOM really is
a complete representation of the HTML document,
so that we can manipulate it in complex ways.
And with this, you should now have a good overview
of how the DOM works and what it looks like.
But before we finish, I need to clarify something
that many beginners find confusing.
So, many people believe that the DOM
and all the methods and properties
that we can use to manipulate the DOM,
such as documented or the query selector
and lots of other stuff are actually part of JavaScript.
However, this is not the case.
Remember that JavaScript is actually just a dialect
of the ECMAScript specification,
and all this DOM related stuff is simply not in there.
So up until this point,
we have only used the JavaScript language itself.
But starting in this section,
we will also use JavaScript in a browser.
I mean, sure, we have used Google Chrome
to run our code in the developer console,
but that's not what I mean here.
What I mean is to manipulate webpages
that are actually displayed and rendered in the browser,
just like any normal website that you know.
Okay.
But, now you might ask,
"If the DOM is not a part of the JavaScript language,
then how does this all work?"
Well, the DOM and DOM methods
are actually part of something called the web APIs.
So the web API APIs are like libraries
that browsers implement
and that we can access from our JavaScript code.
And API stands for Application Programming Interface.
But more about that later.
For now, what you need to know
is that a web APIs are, basically,
libraries that are also written in JavaScript
and that are automatically available for us to use.
So all this happens behind the scenes,
we don't have to import or do anything, okay?
And there is actually an official DOM specification
that browsers implement,
which is the reason why DOM manipulation
works the same in all browsers.
Now, besides the DOM,
there are actually a ton more web APIs,
such as timers, the fetch API, and many more.
Again, we will learn a lot more about this later on.
For now, let's finally start our project
and do some DOM manipulation in practice.