What Is Dom Tree in 10 Minutes
Hello and welcome back to the channel. In this video you will learn what is DOM or Document object Model so if you are a beginner in web development than this video is for you. Also make sure that you watch this video until the end because I will share my bonus tip of working with DOM elements.
Let's jump right into it.
A lot of people think that DOM is something difficult because it sources scary and you can even get this question on the interview. But actually DOM is just a representation of any web page that we open. So it's a document of this web page. It holds all Html tags that we are writing as objects inside.
So no website can exist without DOM and even if you are not using it browser will create it for you.
Let's write small HTML page.
<html>
<head>
<title>This is the title of the webpage!</title>
</head>
<body>
<h1>Hello DOM</h1>
</body>
</html>
So this is our HTML structure of the page and at the moment when browser loads our page it creates the document for our page.
We normally call all elements inside our markup as tags. But when they are rendered inside document they are called document object. And this structure and nesting that we wrote is our model. This is why it is called Document Object Model.
And now to complicate things even more all this tags which are object inside our documents are called nodes. So just to make it clear tags, document object and nodes is the same thing.
One more important point is that we have different types of nodes. The most popular is of course element nodes. So each element that you write body, title, h1, div are elements nodes because they are elements of our page. But there are also other types of nodes. For example text inside our elements is a text node. Also we we sometimes write comments in html and then it is comment node.
Normally if we want to check the our document we open developer tools in Chrome. But the problem is here that they are simplified for easier development.
Here is a service which can show you the real unhidden DOM tree
http://software.hixie.ch/utilities/js/live-dom-viewer/
<div class="red" >
<!-- comment -->
<a href="http://google.com"></a>
</div>
As you can see here we have elements nodes, text nodes and event comment nodes.
Now the question is what can we do with DOM at all? Actually we can do anything with it in Javascript. We can read values, remove parts of the DOM or insert our own parts. For example we can access parts of the DOM directly in console.
document.title
document.body
document.head
We can also apply styles.
document.body.style.background = 'red';
Now here is my bonus tip that a lot of people don't know or neglect. There is a fast was to get access to the specific DOM node to test something in Chrome dev tools. For this we need to select the element in which we are interested and hit Esc key. It will open console under our DOM structure.
Now Chrome already saved for us the last element what we select in prototype that we can access not inside console. We can write $0 and get directly the last element on which we clicked and this is super handy for fast debugging.
So actually I heard question "Why is DOM tree and how it works" a lot on interviews. Now you for sure have enough knowledge to answer this question.
Want to conquer your next JavaScript interview? Download my FREE PDF - Pass Your JS Interview with Confidence and start preparing for success today!
📚 Source code of what we've done