Original subtitles

Let's start this section by learning

how the DOM really works behind the scenes

and more specifically how the DOM is organized internally.

This will make it easier to understand everything else

that's gonna follow in this section.

So first, remember that the DOM

is basically the interface between all JavaScript code

and the browser, or more specifically HTML documents

that are rendered in and by the browser.

Now we have written a ton of JavaScript code

in this course so far,

but many times completely without interacting

with the browser so without using the DOM.

Right?

But now we're back to working with webpages

and therefore with the DOM

and this time we're going to learn as much as possible

about the DOM and how to create amazing dynamic effects.

So let's remember what we already know about the DOM,

which is that we can use it to make

JavaScript interact with the browser

and again more specifically we can create

and modify and delete elements,

set styles and classes and attributes

and listen and respond to events.

In practice this works because a DOM tree

is generated from any HTML document

and a DOM tree is a tree like structure made out of nodes

which looks something like this.

And we can then interact with this tree

as we already did a couple of times in this course.

Now how does that interaction actually work?

Well the DOM is a very complex API

which remember stands for application programming interface.

So it's the interface we can use to

programmatically interact with the DOM.

In practice that means that the DOM

contains a ton of methods and properties

that we use to interact with the DOM tree

such as the querySelector, addEventListener

or createElement methods,

or also the innerHTML, textContent or children properties

and many, many more.

Now in the DOM there are different types of nodes

just as I mentioned before.

For example some nodes are HTML elements

but others are just text, remember?

And this is really important to understand

because all these DOM methods and properties

are organized into these different types of objects.

And so let's now take a look at how the DOM API

is organized behind the scenes.

So first, every single note in the DOM tree

is of the type, node.

And such as everything else in JavaScript,

each node is represented in JavaScript by an object.

This object gets access to special node methods

and properties, such as text content, child nodes,

parent nodes, clone nodes and many others.

Now we already know that there are different types of nodes.

Right?

So how should these be represented?

Well, this node type has a couple of child types so to say.

And these are the element type, the text type,

the comment type and also the document type.

So whenever there is text inside any element,

we already know that it gets its own node.

Right?

And that node will be of the type, text.

And the same actually happens for HTML comments

and that's because the rule is that everything

that's in the HTML has to go into the DOM as well.

Now for the element itself there is

the element type of node.

And this type of node gives each HTML access

to a ton of useful properties

such as innerHTML, classList, children or parent element.

There are also many useful methods

like append, remove, insertAdjacentHTML, querySelector,

closest and that's just to name a few.

So again, each element will be represented internally

as an object.

Now just to make this complete,

the element type has internally an HTML element,

child type.

And that element type itself has exactly one child type

for each HTML element that exists in HTML.

So we have a special type for buttons,

a special type for images,

for links, and so on and so forth.

And that's important because each of these HTML elements

can have different unique properties.

For example and image has a source attribute in HTML

which no other element has.

Or the anchor element for links

has the HREF attribute which also no other element has.

And so the DOM needs a way of storing

these different attributes

and therefore different types

of HTML elements were created in the DOM API.

And just to make sure that we're all on the same page here,

this diagram that I'm showing you here

is of course not a DOM tree.

Right?

So this is not a representation of any HTML document.

This is just a way that different types of nodes

are represented behind the scenes in the DOM API.

Now, right?

But anyway, now comes the really important part,

because what makes all of this work

is something called inheritance.

So what is inheritance?

Well inheritance means that all the child types

will also get access to the methods and properties

of all their parent node types.

For example an HTML element will get access to everything

from the element type, like innerHTML, or classList

or all these other methods and properties.

And besides that it will also get access to everything

from the node type because that is also its parent type.

Okay?

So we can think of this as though

the HTML button element for example,

is also an element and also a node.

All right?

Now this might seem all a bit weird and confusing

but don't worry.

We will learn why this kind of inheritance works very soon

when we finally talk about object oriented JavaScript.

For now, what I want you to understand is that a DOM API

is broken up into these different types of nodes.

I also want you to understand that each

of these types of nodes

has access to different properties and methods

and that some of them

even inherit more properties and methods

from their ancestors in this organization.

All right?

Now we didn't talk yet about the documents node type.

So document, which we use all the time in DOM manipulation

is in fact just another type of node

so it contains important methods,

such as querySelector, createElement

and getElement by I.D.

And note how querySelector

is available on both the document and element types.

So keep this in mind because it will be important later on.

All right, and now there is just

one final missing piece here

because the DOM API actually needs a way

of allowing all the node types to listen to events.

And remember we usually listen for events by calling the

addEventListener method on an element or the document.

Right?

So why does that actually work?

Well its because there is a special node type called

EventTarget which is a parent of both the node type

and also the window node type.

And so with this, thanks to inheritance,

we can call addEventListener on every single type of node

in the DOM API because all elements

as well as document and window,

and even text and comment will inherit this method

and therefore we will be able to use addEventListener

on all of them just as if it was their own method.

Now just to be clear, we do never

manually create an eventTarget object.

Okay.

This is just an abstract type

that we do not use in practice.

This all really happens behind the scenes

to make all the functionality work as we expect it to work.

So in a nutshell this is how the DOM API works

and is structured behind the scenes.

There are still some simplifications here

but this is all that really matters.

And I really wish that I could have had this diagram

when I learnt JavaScript for the first time.

Because I really think this helps structuring

all this information in your mind.

Now if you want to go even deeper than this

there is still tons of material

that you can check out in the MDN documentation

and if you ask me it's all really fascinating.

But again, all that you need to know

is really in this lecture.

It took me a lot of hours to put this one together

but I think it was well worth it

and I hope you think the same.

But anyway lets now move on

to the practical part Of this section

were we will then

finally use many of these things in action.