In this video.
Let's start with the dome.
And the first concept is we are going to examine the dome.
In the previous video we explain what is the dom.
So in this video, let's see in reality what we explained in the previous video.
So let's get started.
So as usual, I have a starter project that we need to download extra straight and open using your Visual
Studio code or better so you can use any HTML application or template to get started with how we are
going to examine the dome.
But if one has to be on the same pipeline, our edu to download it so that we be on the same page.
So I have open this particular project as we see on the screen.
So let's go through the syntax for this HTML.
Again, this section isn't about H.M. but instead is about Adam.
That is why I have provided the startup template or project for you to see that we have each one here
and with each how to underline it as we see here.
And from there I added a paragraph with a few dummy text and a link tag inside the P tag and each one
and few lines of code here.
And we have other does have this content being displayed here as that.
And lastly, I have a form that I added down here.
All right.
So let's get started.
How we are going to use the DOM to manipulate these content.
So in the first place, we are going to select elements in the DOM using some DOM method because I have
already connected my JavaScript.
I can go ahead and make use of the DOM.
So the first step is we still have access to the console.log, so let's console.log and let's see that
JavaScript connected and see that indeed our file has been connected up in the console and now indeed
JavaScript connected.
So let's see how we can interact with the DOM.
And for this one we have a special method called document.
The document is the parent of the entire DOM.
So if MC is of document, what is a global method?
Is that so?
If I console.log that, let's see what we have.
You can see that we have the document which represents our HTML.
So the document represents our HTML.
See that we have the dock type up here and indeed we have it up here also.
And from there we have the HTML tag with the language and that's what we have it here.
So the document represents the entire HTML.
So if I open it, we see that we have the body here, I can open it.
And now this is my dom, you can see that.
So for this particular element here, we can select pieces of this element.
For example, I can select only one or the body.
So let's move step by step.
So the root note of the DOM tree is what we call the document element.
So here we go.
So let me comment here.
Okay, let me bring it back.
Sorry, bring it back on that.
We have what is called the document element.
Okay, document element.
So if I save it now, check it out.
Indeed, this is my document element.
So this one represents the root node of the entire DOM.
So this is equal to the the root node of the DOM tree.
And after that we can also get a body of the Don of my HTML.
So it's going to be as console.log.
Document, document.
Dot body.
So this one gave me the body of my H.M. So let me refresh it.
And now let me remove this one because I'm done with the first one.
So document the body is the element of the HTML, document the body of the document.
We see that now this is the body.
So now I can use JavaScript to move this one from the page.
That's awesome.
Now with a dome we can select pieces of this node or the DOM tree as the way we want it.
And let's say that I want to have the head of my HTML, for example, I want to select the head only
we can do so.
Copy this one.
Come down here.
We're going to be documents dot head.
Let's check it out.
And indeed I have the head which is this one.
See, I have selected only the head element as that.
So again, we can also select the title, title of my page, which is going to be title of the page,
which is going to be this one, which is examine the DOM.
So the whole of this one will be selected.
So this is what we call a node, meaning we are selecting pieces of the DOM and that's what you call
the node.
And indeed this is what we have the title called Examine the Dom.
So let me comment.
This one's out.
Well, we can also select the children of the element body.
So let's come down here and say that select it's going to be select element.
In the document.
Body.
Now we know the document body that contains the actual content of our web page.
So for that content, we can select additional elements.
So here we can select document.
Dot, body, dot, dot children.
So let's see what we have.
The children is a children of the element body.
So if I save it nine p see that these are the children of my document body, meaning the tax that has
been used in my application.
We see that first we have h one which is this which is this 1h1 first and followed by the h r which
is this followed by P which is this one and from the h one which is also the C, the children of my
application.
That's, that's children for you.
So if we want to know all the tasks that has been used in the application, we can use the body dot
children to get those tasks.
We see that we have lastly the JavaScript script file here and you can see that down here we have the
JavaScript script file that is about the document dot children and we can also get the first child element.
So paste it here and then comment this one out.
So it isn't going to be the body, the first child element, first element child.
Sorry.
So this is the first chart of the body element, the first child.
So when I say it, the first child is what the is the H one.
Because looking at the syntax here, the first chart is for the H one.
If I remove this one now, the first child will be what you can guess is going to be the h r which is
this one.
So if we want to know the first child of your node of your HTML, we can use body the first element
child.
So let me bring it back again.
That is the first element child for you.
And if we don't know the last child of the body element, we can we can also use this method.
So let me comment this one.
Now I want the last child of the body element going to be last element child.
So check it out.
The last one is the JavaScript file of which I use inside it.
That is what I have.
So inside my HTML.
Scroll down.
And this is the last child element in the body.
All right.
So let's say that we also want to know the number of children of the body.
We can use the children element count.
So let me bring this one here and comment.
This one out is going to be child element count.
So let's see what we have.
We have 13 elements in the page.
That is the child element count.
And if we don't know the first child of this body, it is same as using the first child element.
And let's say that you want to know the children of the body element.
We can use the child node.
So come here.
Comments this one and I'm going to be the body taught children knows.
So let's see.
So this is similar to the children.
Well, we have a lot of these how we can select the pieces of node in application.
But in rare cases we are going to use this format, but instead we are going to use JavaScript to target
the individual element so that we can use it to interact with a dom.
So now that we know how we can select pieces of node in application, then next video.
Let's start with how we can select this element with JavaScript.
That's where the magic comes into play.
After that, we cannot add content to the page using a HTML.