Welcome to Mrvirk.com. I'm your host Navjot Singh in today's video we're
gonna quickly learn what is Dom HTML Dom if we go specific so Dom stands for
document object model and here I have an example of Dom which we're gonna go into
a little bit later in the video first of all I want to explain you what Dom is
and I have written an extensive article on this I'm gonna leave a link to this
article in the video description below you can go and check out all the detail
description where I describe what it is and give an example which you can use in
your projects and anything else we also discuss the output of a sample page we
create so first of all let me define what Dom is for you guys
so whenever a web page is loaded in a browser the browser could be any it
could be Firefox Chrome or Internet Explorer
I wouldn't recommend using Internet Explorer in 2019 or going further but
anyway if you're using that any browser it is it will create a Dom and as soon
as the Dom is constructed it has it is constructed as a tree of objects and it
helps define HTML elements as objects events for the HTML elements properties
for the HTML elements methods for HTML elements as well so Dom also provides an
API which is like a programming interface for JavaScript using which you
can actually manipulate the Dom and that helps create the HTML pages dynamically
so with by using javascript and manipulating the Dom using its API we
can basically add change or remove things from the HTML page add styles to
it and do a lot of things so let's now
quickly go back to over diagram and since now our basics are clear what DOM
is and what it can do for us let's look at an example Dom so when a page is
loaded it's loaded as a document right and that document object is provided by
the browser window so this would be the browser window the whole thing is a
browser window each tab is a browser window and the browser provides the
document object and that has a root element which would be HTML which is the
HTML page and then that HTML can have child elements in this example we have
the HTML element directly has two child elements which is head and body and then
the head and the body element again have their individual child elements so we're
gonna dig into that now so head here has an element called title and that title
has a text assigned to it which says I am a page title and then we have an
element body actually I might have some yeah let's shut that off and hopefully
we'll have a better view of this so then text has I'm a page title and then we
have an another element called body has an element called heading h1 and that's
gonna have an attribute to align it to Center
then this heading one has basically an text which says I'm heading which is
basically an identifier then we're gonna have an element for paragraph we're
gonna have paragraph element and that has an attribute that sets a background
color of red for this and a text assigned to it which says I'm a
paragraph and we're gonna have an image and that's
gonna have a source so basically that was a quick overview of Dom example now
let's go in Visual Studio code which is my code editor and we're gonna write
some code to produce there's this exact dome in this example so I'm gonna have a
blank canvas here and I have loaded this blank canvas here as you will see as
soon as we create index dot HTML file as soon as we call it dot HTML the browser
recognizes that and it automatically gives HTML had body and then a closing
HTML tag so that basically is an empty Dom at this point we have so this would
be the root element then we have a child of this root element which is had and
then body so these guys don't have anything in them at the moment let's go
in and create some things so first of all we're gonna create an HTML tag we
close it and then we're gonna do a head and if we go back and reference our Dom
we're gonna see that our head has a title so title and it says my page title
and then we had a body element body done has h1h actually let's go back and look
at the results for this and at this point we still have a blank but you will
see a difference for the page it says I'm a page title instead of a blank and
if we go in and see it says title I am Paige elements actually to get this
window in Chrome Google Chrome all you have to do is right-click and whoa
okay so you basically have to right-click and just inspect and that
basically gives you the elements a console a source and a network tab in
this tutorial we're just gonna work with the elements tab let's go back and
create our heading h1 and what was this call so it had a text of I am a heading
and it was also aligned in the center
next we had in paragraph and paragraph I think said I am a paragraph let's say
that and this background-color I think as well yeah
that those had a style and then the background color we're gonna call that
as rut let's go back and see the results for that so at this point we have an
heading which is h1 we have in paragraph which says I'm a paragraph and it's
centered oh sorry it has a background which is red and that's what we actually
had in our Dom as well so as we go in and see we have and had at this point we
have a title we have an body element then we have h1 and a paragraph all
that's left is an image let's go in and do that as well so we're gonna create
image source and in this case I'm not sure if I have an image locally at this
time so I'm just gonna grab one from my website so I'm just gonna use my website
URL and if we go back and here we go this is basically replicating the same
document object model but like in HTML code from there this is the end result
and this is what we had here in a nutshell this is what Dom is it's pretty
simple and as we said it allows us to do amazing things with our webpages and I
really really hope this tutorial helped you guys I'm gonna leave a link to this
already in the video description below where you
can actually go in and as as I said you can read all the description you'll have
high quality Dom images which you could use in your projects and then I describe
each bits and as we see here is the output I'm gonna leave a reference to
the code as well so you guys can go in and enjoy the article thanks for
watching please subscribe to the channel if you like the video see ya