Now I got another upcoming exercise for you,
but before we go there and apply what we learned,
I want to summarize what you learned in this module up to
this point.
And of course the main topic of this section up to this
point is how you can work with the Dom and maybe let's even
take a step back from that. What was the Dom again?
Well, the Dom in the end is just the parsed HTML code,
the browser parses the HTML code so that it knows what it
should show on the screen.
And it stores basically a bunch of JavaScript objects that
represent the parsed HTML code internally,
which it then certainly also uses internally, for example,
to bring this onto the screen,
but which it also provides to you as a developer,
so to through JavaScript, and to be precise through
this document variable, which is globally available,
you can access that Dom.
Now document, as you learn stores an object
with a bunch of properties
where most of these properties,
then store more nested objects
so that you can actually drill
into that Dom and access the different HTML elements that
live inside of it.
Now since drilling into the Dom, like this is possible,
but can be cumbersome,
we also learned about utility methods,
which exist like very selector or a get element by ID.
It is worth mentioning that these are not all the available
methods.
There also are methods for getting elements
by tag name and so on.
And there also is query selector all
to select more than one element.
But these two methods are definitely two of the most
important and common methods for searching for specific
elements in the dom.
Now, once you got hold of an element,
you can output it to look into it,
but that's typically not too useful
to the visitors of your site.
And therefore you can also manipulate those elements,
for example, you can set the ref attribute,
the ref property and therefore the attribute
off at element through JavaScript to change the
link destination.
As you saw before, you can also change styles or
the text content of elements through those different
properties that exist on those elements.
And here indeed, it is a good idea to consult their
elements, to find out which properties and
methods are available there.
Now you can not just select and add existing elements.
You also learn that you can add new elements and insert
them into the page, into the dom,
that you can remove elements and that you can
also move elements around without deleting them.
So just moving them into a new position on the page.
And that's all also sometimes useful.
And sometimes these are features,
which you also need to add a certain feature to your page or
achieve a certain behavior.
Of course, as mentioned before,
we are going to see more examples for that
throughout this course.
Now, in addition to selecting and manipulating elements,
you can also add event listeners with that add event
listener method, which you can call on all those elements.
And then there is a broad variety of built in events like
the input event or the click event,
which we also saw before to which you can listen to
then tell the browser to execute a certain function at some
point in the future, when that event occurs.
And in that function,
you can then execute any code you want to execute one steady
event occurred.
Now in that function, which has executed by
add event listener eventually
you'll also get such an event object as a first
parameter automatically by the browser.
And you'll learn that this event object holds various pieces
of information about the events that occurred.
For example, also the events target,
which is the element on which we clicked or on which the
input event occurred.
And that then allows you to get data from that element.
For example, as we're doing it here in this demo JS file.
So these are all extremely important and useful features,
which you will often need.
We also learned about the disconst keyword,
which you can use instead of let,
if you have a variable where you indeed never assign a new
value to, with help of the equal sign.
If you never assign a new value to a variable,
and really only to the variable itself,
not to some nest of property that does not matter,
but if you never assign a new value to a variable,
you can turn it into a const to be more explicit about the
fact that this is a variable that does never change and
that should maybe never change.
So that's another keyword I introduced in this section.
And with that, you already learned a lot about
how to work with the Dom and how to manipulate it.
And therefore next up,
I'll give you a chance of practicing what you learned before
we then explore control structures as a next step.