So, what is this DOM thing about then?
DOM is the abbreviation for document object model.
And that's a concept in web development
that describes the data representation,
the browser internal representation,
of the parsed HTML code we wrote.
So as a web developer, we write HTML code.
That's what we did in all those previous sections basically.
And the browser, when it loads this website,
then parses this code,
so that it knows what it should display on the screen.
Now, during this parsing process,
the browser kind of translates the HTML code
into a bunch of JavaScript objects, you could say.
Every HTML element we created is translated
to a JavaScript object
and those objects are then nested into each other
to represent our HTML structure.
That's how you can think about it.
Technically it's a bit more advanced than that,
but roughly that is what's going on.
And since we have this JavaScript representation
of our HTML code.
So since this HTML structure was translated
into a structure of JavaScript objects,
our JavaScript code is able to interact
with that DOM as it's called.
So with that browser internal representation
of the HTML code, and we can extract data from there,
for example, to read some value the user entered
into an input field and, or manipulate it.
We can add new elements, change existing elements,
for example, change to content or the styling
and do many other things.
And the door to this DOM thing is this document object.
Through that object we access this so-called DOM.
So this browser internal representation off our HTML code.
Now why will they is DOM thing
and this document object matter to us?
Because if we want to build a feature for our website,
like this character counter,
where we can see how many characters are left
before we hit the max length
and where we changed the styling of these elements
when we go below 10 remaining characters.
If you want to build something like this,
then we'll need that DOM, because in our code,
which you can't understand at this point,
but we'll get to there throughout the course,
in our code we will, for example,
use this document object, to get access to certain elements
in our HTML code.
So to certain elements on this page,
like this input field to then,
listen to certain events, extract, for example,
the current input value,
to then count the number of characters
that are currently entered
and to then change the styling, or add extra classes.
And again, we will learn how exactly that works
and what all that code does,
step-by-step throughout this module.
But the debts, why does DOM thing will matter to us.
We need a way of getting access to the parsed HTML code
in the browser so that we can change it
or that we can extract values from it.
Like, for example, the entered input.
That's why we need the DOM,
because our JavaScript code needs access
to what's happening on the screen.
And that's what we're going to explore
over the next lectures,
and then this will all become clearer.