Jonas: So in this section,
we are going to make JavaScript interact
with a webpage for the first time,
and the technical term for that is doing DOM manipulation.
So in order to do that, we need to first know
what the DOM and DOM manipulation actually is.
So, DOM stands for Document Object Model.
Now, the DOM is a structured representation
of an HTML document that can be used
to connect webpages to scripts
or programming languages such as JavaScript.
Imagine a very simple webpage like the one
we see here on the right side.
We can say that each HTML element
can be represented by a box like this, right?
Now, the DOM is a fully object-oriented representation.
So, for each of these boxes, there is an object in the DOM
that we can access and interact with
right from our JavaScript code.
But before moving on, I just want to make
crystal clear that JavaScript and the DOM
are two different things.
So, what we have been doing so far
was to just use the JavaScript language
without any interaction with any webpage.
All we did was just to print some stuff to the console
but now, we're going to use special JavaScript methods
that allows us to interact and manipulate,
which means change, the DOM and therefore the webpage.
And since I said methods, that means
that they are functions attached to some object, right?
And that object is the document object.
So this is the object that gives us access to the DOM.
Okay, once again, the HTML webpage content
is stored in the DOM, which can then be accessed
and manipulated by a JavaScript,
and that is exactly what we're gonna do
in the project in this section.