DOM Tree Explained: Document Object Model for Beginners

Ajouté : 2026-05-31

[00:00:00]we will learn about how we can use dom for things like updating or manipulating the content of a web page to create a web page we need to write html browser converts this html and assembles them in a structure known as dom tree it is called tree because it has a root and multiple branches document is the entry point of the dom let's see how we can use these things in browser so here i have a very simple html page with some div and h1 so as we say document is the root of the dom we can go ahead and type document and when we type that we can see document is the whole web page we expand it and we'll see the whole html is in this form and if we try to match this with our html we'll see its exact match but i was also talking about like document is an object let's see the type of document yeah it says it is an object but when we expand it it feels like html this is what browser does just to be friendly if we want to see document in an object form we can go ahead and do console.dir followed by document and we'll see it is in the form of object and it has lot of properties like you can go ahead and see we can also look at some other different element that is present like document dot head will give us access to the head of the html similarly we can go ahead and say document.body it will give us access to the body element there is also another property called document.title and we can see the title here is updatingdom same thing here how about going ahead and changing the property of title from understanding dom to something else like alt campus and if we press enter we'll see the value of title got changed from understanding dom to alt campus so this is how you can manipulate the value we'll learn about all these things in much more details in coming lessons but how about going ahead and looking at properties like the body for that i can say document dot body but i want to see them in object form so i can go ahead and say console.dir and if we expand it we will be able to see that it has a lot of properties and these are the properties and methods that are available in dom that help us manipulate the content of the web page so we can see here they have properties like inner html inner text here we can see that it has a property called children in children we can see there is a div so now our body has one children that is div so we are accessing body right now and div is the children of body how about going ahead and seeing how many childrens are there of this specific div first is h1 second is div so we'll click on this and here we'll see children again and we can see that it has two things h1 and div if we expand it here we can see it has image and ul so we can go ahead and look at the whole structure and will find out that the structure of html is very very similar to the structure of dom so image and ul similarly so ul will have four children's that is h3 and three allies so we learnt about things like when you press document you can see the whole web page and to see it in object form we can do console.dir if we want to check the head we can say document.head document.body will give us the body of the page similarly document the title will give us the title of the page