What is the DOM?

hey guys I'm Matt a developer from Ohio in this video we're going to ask an answer what is the Dom if you've done any web development you probably at least heard the term we're going to explain what the Dom actually is learn what it looks like figure out how to use it and most importantly why you should care about the Dom at all so what is it well most of the information we need is right in the name DOM is an acronym which stands for document object model in a broad sense the document object model

is the browser's internal representation of a web page every page relies on a Dom to spell it exactly what stuff should be on the page and how that stuff relates to all the other stuff to understand more about what the DOM is let's take a look at each part individually you may have heard web pages referred to simply as documents the word document really just refers to any way of structuring information articles books scientific papers whatever but from a web development point of view document is another word for web page so the DOM is a

model of all the stuff on a web page or a document these stuff on a web page is objects or at least that's what the Dom calls them you may have also heard the term nodes or elements used to describe the stuff on a web page these are types of objects but what are these objects exactly well the most obvious kind of stuff on a web page is the content every page has words content also includes images videos buttons etc all of those things are considered objects you may also heard this stuff referred to as

elements which is a specific kind of object another kind of stuff is structural elements which are things like divs containers and sections you may or may not be able to actually see all the structural objects on a web page but they're needed to organize the content the remaining stuff is mostly attributes every element has attributes for example HTML elements can have classes styles sizes etc all of these attributes are objects in the document object model but they aren't elements like content or structure the M in Dom is model a model is a representation of something

and it helps us understand how that something is put together there are models for anything you could think of because complex things need is some way to be universally understood analyzed and used I'm sure you've seen blueprints floor plans IKEA directions recipes these kinds of models are instructions they depict the objects in enough detail that someone can recreate the objects another kind of model is more like a summary of big ideas or complex systems you can't build a galaxy so you don't need instructions per se but you can understand it with the help of models

so then what kinds of models do we have as web developers we have the Dom which is a model of webpages we'll see soon how it acts as a set of instructions for the browser to follow and as a summary of webpages for us to read so what is the Dom it's a way to model the objects in a document or in simpler terms the DOM represents the elements and attributes on a web page now that we know what it is let's take a look at what it looks like the Dom is a kind of

data structure called a tree all that means is that every object is hierarchically under another object an object can have multiple children but only one parent when we talk about parents and children we're referring to the relationships between objects child objects are under or within parent objects you might even say that a parent object sort of owns its list of children if we were to remove any object from this tree all of its children and their children and their children's children would all be removed as well a tree graph can be used to represent all

sorts of models for example we can try to represent a galaxy like I mentioned earlier the top object the parent of all parents will be our galaxy itself this position in the tree is known as the root node the children of the Milky Way are its stars there are obviously way more than two of these in our galaxy but our model doesn't have to cover absolutely everything our star is called Sol which is why we refer to our system as the solar system the children of the solar system are its planets and other space stuff

orbits around the Sun again I'm not showing every orbital body here it's important to realize that the children of an object don't have to be the same type of stuff here we have two planets and an asteroid belt under earth our planetary sections like continents and oceans we could go down and down this tree until we're talking about particles but I think you get the idea by now so let's take this model of a galaxy and turn it into a model of a website a website or a document is structured in the same way as

a galaxy if you've written any HTML you know that the HTML tag is at the top of the file then head and body in this example we have a pretty standard website with a header main section and footer in the header there's a logo a heading and a navigation section and let's not forget that attributes are objects too the image is going to need a source attribute to reference a PNG or something every one of these things is an object and every object has exactly one parent this is the Dom or at least it's one

way of visualizing the Dom so what does the Dom look like in real life I mean you won't see a tree like this in your code or in a browser in my opinion the best way to visualize a real websites tom is to open up the developer tools in your browser this is an image from Chrome's inspect element feature this list of tags may not look like a tree structure at first glance but it's the exact same information as our graph every indentation level in the inspector is a vertical level from the graph the buttons

to the left of some tags hide even more children than we can see here so we still see that source is an attribute of image which is a child of header which is a child of body which is a child of HTML this is probably the most common way to visualize a Dom because it looks just like HTML most web developers can read HTML so it's helpful to see the document in a familiar format plus because it's built into the browser it's super easy to access so is the Dom HTML this is a common misconception

because the most common way of viewing the Dom looks like HTML but there are more ways to create a document than just HTML lots of technologies can be used you can use PHP to generate HTML when the page is loaded or you could use JavaScript to edit Dom elements on the fly you can even use technologies like react or angular to generate entire pages without writing any HTML so the Dom is an HTML the Dom can be represented by HTML just like it can be represented by the tree graph these are formats of the Dom

can be viewed in but the Dom itself is the underlying data structure of objects that make up the document let's take a look at some ways to view the Dom as we've seen we can represent the Dom with this tree graph this is the best way to graphically represent the Dom's actual data structure but it's not very helpful when trying to write code it can also be represented in the browsers developer tools which I mentioned is probably the most common way the inspect element tool allows us to see the document in a way that more

closely resembles a web developers understanding of webpages in that it reads like HTML source code is another representation of the same document we could figure out how web page will look by reading the entire source but tools like inspect element were created specifically so we wouldn't have to the source code is however the only way of viewing the document that allows us to edit the document it's a lot like how a musician can know what a song sounds like from its sheet music or how an architect might know what a building looks like from its

floor plan these are all representations of a specific thing and just like how we can know what a web page will look like based on the tree graph developer tools source code the browser also knows what it look like the rendered web page is another representation of the same document we can edit the Dom via source code a browser reads the Dom in order to render the web page because we can control the Dom with our source code we can control the rendered web page if you recall I said earlier that a model can be

either a set of instructions or a description for a browser that Dom is a set of instructions on how to build a specific webpage for a developer the Dom is a readable description of those instructions so how is that visualization useful to you as a developer now that you know how to visualize and understand the Dom you can more easily control the actions sent to a browser no matter what language library or framework you're using if you're changing something on a webpage you are using the Dom hey thanks for watching you can join the conversation

by subscribing to this channel or drop in a comment below and if you want to take your skills to the next level you can start learning on code Academy today