The DOM

Kalob Taulien
A free video tutorial from Kalob Taulien
Web developer and coding instructor
4.6 instructor rating • 29 courses • 291,855 students

Learn more from the full course

The Ultimate HTML Developer 2020 Edition

Learn HTML/HTML5 from scratch. Practice tasks and tests included. This is a beginner-friendly course!

10:06:36 of on-demand video • Updated July 2019

  • HTML
  • HTML5 (the most modern version of HTML)
  • XHTML (the strict version of HTML)
  • How to get started as a web developer
  • I'll help you get your coding tools setup
  • Basic CSS
  • Live code written right in front of you
  • Tasks for practicing HTML at the end of almost every video
  • 4 modules modules with extensive quizzes that total over 75 questions
  • Guidance on what to learn after HTML
  • Learn how to read source code of any website
  • The ability to create your own website with using HTML.. from scratch!
  • The ability to read, write and understand HTML: The structure behind every website
English [Auto] Welcome to the first lesson on advanced age TMM. The first thing we're going to learn about is the Document Object Model or what I'm going to call the DOM. The Document Object Model is basically your hierarchy of how a browser understands what is in your page and where it exists. Now what I mean by that is think of it's like a tree map so you sort of have your starting point up here and then you might have like a block here in a block here and they may have a block here and here and then one over here and here. And those might have some blocks that maybe some text inside of each block. All of that is considered the Document Object Model. So the Document Object Model it how would I describe this. Every piece of each team and every element that you write is an object. And so it has specific attributes and specific methods that can be taken on it. So when we eventually get to JavaScript after you learn HDR e-mail and then see assess and then JavaScript in that order once you get to JavaScript you'll actually be able to modify the DOM dynamically. So you'll be able to change all of your female elements and the attributes in the text and everything in there is completely fluid and the document object model is sort of the brain behind keeping track of all of that. So what I would like us to do is just explore the document object model so all I'm going to do here is open up a new tab in my browser and I'm going to go to Google dot com and we are just going to explore some of the different Document Object models out there through various images and then we're going to explore one that we've actually already written. So go to Google dot com and then whereas images where is images click on images and we're going to do an image search for Document Object Model. And here we can see what looks like a bunch of graphs. And so let's look for one that looks somewhat NICE AND REPRESENT THE BOWL we've got tables then we don't want tables. Let's do this one. No let's not do that one that's not really good one let's go ahead. Copy that image location and paste that in there. Here we go we've got a dom and this is just from images that slide player dot com not my image I'm dressed as a declaration out there I did not make this but the document object model is basically a document and then we've got a root element our HD out which is why we always add each e-mail to our documents and then we have our element head and in the head we have a title and a bunch of other attributes we've only ever seen title so far and then in the body we might have a link and we might have an each one we might have a paragraph we might have a table we might have a div and then inside of that div we might have an each one inside of that each one we might have a link and so it gets bigger and bigger and bigger and bigger. Now typically the head is not very big and a good example of this is from our last lesson with tables. We can see that I have over 70 lines of code and I'd say seventy four up into line seven so about sixty five lines of code is all the body. And the only thing I have in the head is one line. Just a title. So right now it's like a one to sixty five ish ratio and so this document object model basically you have a very shallow head and you have a very large body and that's totally normal. And then inside of each element you have particular tack. So like inside of the title we have my title in this image or in the tables one we have what do we have in there. It's just called tables. So we have text in there and that's just called and that's just called a text node. Let's go ahead and take a look for another example. Do we have a bigger one in year. Let's go ahead and type. I don't know a large document object model it's copy that image location and let's open that up as well. So in here we have a document which is our team. This would be our HD e-mail element and then somewhere inside of the body we have elements and we've had comments and we've got processing instructions. But basically we just want to follow the straight down. We've got her HMO and then we've got like some sort of body and then maybe we have a div and maybe the div has an attribute maybe that attribute is a title and that title has a particular text value. So this whole mapping is part of the document object model. Now explaining this in images is honestly not doing it justice. So what I'm going to do is I'm simply going to refresh this page and I'm on tables dot HDMI which you have access to in order to get to this document object model. Let's inspect this element so right click inspect and we are going to see all sorts of stuff in here. So we have the doc type as HMO. So we're telling the page of this particular document object model should follow HDMI L5 standards inside of this we have HDMI. It's the only HDMI element that we have and everything goes inside of it. Now inside of each team we have two elements we have head and body head is where all the knowledge of your page goes or your page titled menu descriptions which will cover later linking to CSF which will cover later maybe javascript again we'll cover that a little bit later. Sort of the information the metadata about the page goes inside of the head and inside of the body is everything visual everything that you can interact with. So inside of our head we have one element and this is a title. So you could say that our most parent element is the chemical element and then it has a child element called head and that head element has a child page or a grand child page in relation to the HMO called title and it has text in there that we can change change at any time and you can see that that took place up here and so anytime you make a change to your document object model inside of your inspector it's also going to reflect that change on your page so let's close up the head and let's look at the body. This is going to be much more complicated. So in the body we have three elements. So we've got three children in Year Three child elements from the body element. We have a first table we've got a horizontal rule and it's just a line that goes across the page and then we've got a larger table underneath it which has 16 20 24 cells. So six rows four across six times four is twenty four although we can't necessarily see that because we've been merging some of these together but if we look at our first table this top one here this has one element. In fact we actually didn't write this we cheated in that last video we did not give it a t body but to the document object model said oh there was no t body specified. OK well this is going to be in a t body. So it actually modified the hierarchy of our page for us inside of the T body is a table row we've got four of them and inside of that first table row we have four T H table heads or basically their table cells that are text aligned centered and bold and we have four of those. And then in each one we have some text and watch this change right up here some text in now so we close that went up and we have the next one. So the next one has four elements in it and the next row has three elements. And the next row has three elements. And this goes on and on and on and on and on and this table actually has a specific T had t body and T fun. So if we go into like the T head we can see that there's a table row in here. You can actually see what it looks like when I hover over it then we've got t had column one two three and four and then when we go into the footer we're basically going to see the same thing footer title one two three and four. And so this creates a structure where everything is nested underneath something else. So everything is going to live inside of your h to amount then you've got head or body. And if it's in the body you're going to have some sort of element inside of that element you might have another element and inside of that one you might have another element and then maybe you just have some text in there maybe it's just an image. Maybe there's no text and it just ends with a particular element this whole thing creates the document object model. Now you're probably thinking why is this important. This is important when you get into CSX because you need to know about nesting and how to select certain elements so you can style them a certain way. Well you'll get plenty of practice in with my CSX masterclass course but it's actually even more important when you eventually get to JavaScript so you'll learn HDL first and then CSX and then javascript you'll learn how all of these sort of get modified different doing air quotes here methods. There's different functions for modifying everything on the page. Now when you load a page. This is what your browser initially sees it is a bunch of code that looks like this and when it reads that it says OK the doc type is HCM. Also I'm going to pass it as H2 and I'm going to break it apart and understand it as HD e-mail. And when we look at our first table it's table and then 40 hours but when we look at the first table in our document object model that's part of the Inspector here. We can actually see that there's a t body. And so our browser said what you wrote was not good enough. And so I'm going to put all of this inside of one more element called a T bought it just to keep things nice and standardized. And then with C Ss or JavaScript should you ever want to just select the particular body of a table. So let's say in our second table here we have a head a body and a foot. Maybe you just want to use like something in the body. You can do just that or if you want to grab just the head and then hit delete. You can do that too. And let's delete the footer. And now we just have a table with rows in it. No header no footer CSR as in JavaScript can help you with all this sort of interaction. And the document object model all of this magic behind here is what keeps track of all of the changes for you. So it takes your initial payload whatever your server or your pages is loading all this each time it takes all that renders it into Prop. 8. E-mail your browser says OK I'm a math machine I'm going to understand how all of this works and fix it up to the best of my ability which it does. And then you can take action on that. So it's a nice way of standardizing everything that is your document object model. Now you don't need to know too much about that with HDMI out. And I'm sort of just throwing it into the HDMI course because I know from experience that a lot of CSX courses and a lot of JavaScript courses do not tell you what a document object model is. They just assume that you know what it is and they call it a dom and you're like What's a dom and the DOM is introduced when you start writing each team out. So we're learning about it now. Now I have one small task for you in this one. What I would like you to do hop on the good old Google machines and just type in Document Object Model and just look through some different images let's put in Dom let's here's a good one. You should just wrote dum dum or document object model and you could take a look at something like this rewrite like your core maybe Excel h h to email that one is actually not super great. This one's better. You've got e-mail that you hadn't title and body paragraph. List list items first second all sorts of stuff like that. Just take a look at a different Doms just sort of try to understand how this works and how it relates to the code. We've already been writing once you are done with that you have pretty good understanding of how that works or you just get a little too bored you just want to move on to the next lesson. That's cool too. I'll meet you over at the next one and we are going to learn about X HMO and we've actually already seen some of this and we're going to learn the difference between HMO and x h t M.L..