This section is all about dome.
That is document object model.
Well, before we get into the technical definition of dome, let me give you some concept.
In that way, it will help you to better understand what is the dome.
Great.
You could see that from the beginning of this course.
To this point, all what we are doing is to display text into the console of our browser.
But in real world applications we are not going to use the console to build applications for users to
see, but instead the console help us to debug and test our code.
So we need to find a way to allow user to interact with our application that we are about to build.
That is why Dome comes into play.
Again, before I give you the definition of Dome.
Let's see some examples here.
For this particular application that I built for my company, which is a voting application.
It could say that this application was built using a HTML, CSS and JavaScript.
That is a front end.
Great.
But behind the scene we are using React.
So let's assume that this application was built using HTML, CSS and JavaScript and the contents you
see on the screen.
You can say that, well, we use HTML to display this content.
That is fine.
That is perfect.
But when it comes to the interactivity of the application.
So if you scroll down and when I click on this award, you can see that it's going to fetch some awards
that I can apply.
So if I click on Apply, you can see that now I can interact with this particular application.
Well, it's because of the dome again.
And if I go to my dashboard, I can do any action.
For example, delete a user or check my transactions, and even I can create a new award.
I can find all my other categories, I can show result, I can do whatever I want, I can interact with
the application.
So with all the HTML and cases, we cannot do this.
But with the help of JavaScript and the DOM, now I can interact with the application, I can edit a
user, I can do whatever I want.
So it's all because of that.
Dom.
So the DOM simply means that it allows us to use JavaScript to interact with our application.
So let's get into that and see what is all about here.
So what is the dome technically?
Dome is a tree structure that represents the structure of the HTML document.
Well, so the estimate that we write, as soon as we render into the browser, we have a structure like
this and this is what we call the dome.
Well, let's use this scenario to explore more when it comes to Dom.
Remember that every application comprises of the HTML, CSS and JavaScript and all these are being rendered
inside our browser.
So let's take it that we have built an application and this application, it comprises of HTML as we
know for structure our application and we have CSS to add some styling to application and we have JavaScript
to add interactivity to our application.
But JavaScript alone could not perform a work to add interactivity to our application.
So let me show you what I mean here.
Let's take it that we want to watch or make a search or query to a certain website.
So as soon as I enter what I want, I'm going to hit enter well before a request is being sent to the
browser.
There is an intermediate here, meaning that with this intermediate it's going to help us to use JavaScript
to interact with our application.
So this intermediate here is what we call the DOM.
So in short, the DOM helps us to use JavaScript to interact with our application.
So back to this application, you can see that again.
I can edit this contestant is because of the DOM.
It's allowing me to add some interactivity to my application using JavaScript.
So with the help of the DOM, now I can use JavaScript to make any request or to interact with my application.
So as soon as I hit enter you can see that with the help of the DOM.
Now I see what I was requesting for.
All right, so let's continue to explore more about the DOM.
Let's take it that we have built an application that comprises of a HTML, CSS and JavaScript.
Well, so before I can interact with my application, that is with the HTML, unless I need JavaScript
in the mix.
So in JavaScript I can add dynamic content into the page without doing it manually.
Well, so the process of adding content to the web page using JavaScript, it needs an intermediate
to call Dom.
So Dom is the interface between the browser and the HTML document.
So the DOM help us to use JavaScript to interact with the HTML.
So Dom is not JavaScript and Dom is not a programming language but instead is a built in API inside
our browsers.
So this DOM is also a complex topic.
We need to know what it means.
Some methods we can use in the DOM to manipulate our content using JavaScript.
So in short, DOM is a way of allowing JavaScript to interact with the HTML dynamically.
So it's a kind of interface or API that help JavaScript to interact with our application.
Now you know what Dom is all about.
Now let's see some use cases or uses of the DOM.
Well again, don't make it possible to use JavaScript to interact with the HTML document.
So with the DOM we can create a HTML website without writing a HTML code manually.
We can use JavaScript to create h one.
We can use JavaScript to add pizza and all of these things are possible because of the DOM.
So let's see some use cases when it comes to the DOM.
Well, with Dom, we can use it to create new elements, for example, P tag or image or whatever.
We can use the DOM to do that.
And again, we can use the DOM to move elements from the page.
And this what normally we see on some application.
For example, if want to delete a content back to this application here, if I go to contestant now
when I click on view details about this contestant, we see that now I can delete this particular contestant.
So that is the purpose of the DOM create.
So now next is I can also or we can also use the DOM to add styling to a HTML.
So instead of adding CSS manually, we can use the DOM with the help of JavaScript to add styles to
our element.
So as we proceed, we are going to use the DOM to add or to create new element to.
Element and add styles to an element.
And above all, we can use the DOM to get value from input field.
So back to this application, let's say that I want to apply for a certain event or award to contest.
Now with the dome, we can get a value from from impute and win the value.
We can do whatever we want with it.
So let's say that I want to apply for this category, so I'll click here.
Now when I enter first name here and with the help of the dome, are we able to retrieve the value here
and send it to, let's say, my server for processing at the back end?
That's one beauty when it comes to the dome.
And apart from that, we can use the dome to set attribute to an element.
Well, and also the most cool part is we can use the dome to add event listener to the element.
So event simply means that any action that we can take it on a web page, we have a couple of them talking
about mouse event.
That example is clicking and drag in all these are event and we have keyboard event key app key press.
All of these are event listeners.
When it comes to form, we have submit and reset.
All these are event listeners.
And again, we go through all these examples and see how we can use the dome to do all these stuffs.
Well, now that we have the clear picture of the Dome, the next video, let's talk about Node.
Now, after that, we will make our hands dirty to start to write code that interact with our browser.