Royletron.dev

Lesson 3 - Document Object Model (DOM)

March 14, 2019

It’s time to get into some gritty technical details about what is going on with your HTML and specifically how does your browser interpret what it sees when it reads the code that makes up your HTML.

Enter the Document!

So when your browser downloads your HTML it converts the text into what we call the ‘Document’. Basically this is the ‘live’ version of your running website, and this follows a standard pattern we call the ‘Document Object Model’ or DOM for short. The DOM is ‘computer legible’ - i.e. something a computer can understand - representation of the webpage, and defines how your CSS and Javascript will work alongside it. The DOM is in effect a big tree, with elements spanning out as branches and leaves of the tree. Consider the following HTML:

<body>
  <div>
    <p>
      Hello <span>World</span>
    </p>
  </div>
  <footer>
    <p>
      My amazing footer
    </p>
  </footer>
</body>

You should already know from the second lesson that HTML ‘tags’ can live inside of other ‘parent’ tags, and here we have a div and a footer inside of the body tag, and inside each of those is a p tag. You will also notice I have formatted the text so that each thing that is in a parent is indented by two blank spaces - this is very intentional and super good habit to get into. This structure of parents and children would look like this:

Figure 1: DOM Tree

Here you can see the p inside the div and it’s two children ‘Hello’ (which is just text content) and a span which has it’s own text content ‘World’.

Why Do I Care About It?

Generally speaking the structure of your HTML should give some sense as to it’s meaning, so in the above example we have our footer tag would make sense to be the footer section of our website. You might also want to group posts in a blog in their own div or article tags with the various tags that then make up that content inside of it like p, h1, etc.

Ultimately the most important reason to this structure is it helps you target specific things in your HTML in order to manipulate them. This is particularly relevant when you want to target specific tags with CSS styles, or you want JavaScript to interact with them in some way. This structure becomes very useful! But more on that next, when we introduce CSS!


Darren

Written by Darren who lives and works in Oxford, being a wizard like Harry Potter ⚡. You should follow him on Twitter