WTF is the DOM?

If you would prefer to watch this post, you can do so with this community resource lesson on egghead.io.

DOM stands for Document Object Model. It's the interface that JavaScript uses to interact with the current HTML page. The DOM is a tree 🌲This means there is a root node that everything is nested under. In this example, you can see that we have a single paragraph tag with Peanut Butter Falcon in this inner text.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>WTF is the DOM?</title>
  </head>
  <body>
    <p>Peanut Butter Falcon</p>
  </body>
</html>

You can access this element with document.body.firstElementChild. JavaScript can change the text, appearance, and just about anything you would want to do to this page.

You can see this by adding a script tag to our html.

<script>
  document.body.firstElementChild.innerText = 'Knives Out'
</script>

When you save and reload the page in the browser, you'll see that our JavaScript has actually changes the text value in our HTML.

Blog

Ian Jones

Join Our Newsletter. No Spam, Only the good stuff.

Related