DEV Community

loading...

WTF is the DOM?

Ian Jones
I build software on the web.
Updated on ・1 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (8)

Collapse
bogdanned profile image
Bogdan Nedelcu

Great quick piece.

It would be great if you could have detailed a bit more about what specific kind of tree the DOM is. How is it transversed and how that affect the painting of a page, resources fetching and so on.

Collapse
theianjones profile image
Ian Jones Author

That is definitely getting into browser internals that I have only a little familiarity with. I would love to see a post on that though!

Collapse
adam_cyclones profile image
Adam Crockett

Did you know that #document is a node as well. I guess that makes sense given that document.body and document.head are not roots, this isn't a multiroot tree.

I think after many years I still have fundamental gaps in my knowledge and so it's good to read little posts like this.

Collapse
theianjones profile image
Ian Jones Author

What are some other gaps that you have discovered lately?

Collapse
adam_cyclones profile image
Adam Crockett

Great question!

  • That not all requests are async
  • Object.assign actually assigns not copies
  • semicolons should be used.
  • loops and blocks can be labelled

I have written a lot of posts lately about wierd bits I thought I knew.

Collapse
omarsteam profile image
omar-steam

Good first piece my guy. The only critique I have is show the document.body.firstElementChild on a browser via a screenshot or something if you got what I'm saying. I'm definitely giving you a follow though for the effort you put it into this article. Shout out to you.

Collapse
ffirsching profile image
Felix Firsching

Great article, maybe elaborate a bit on why .firstElementChild works in this case, because if one has no knowledge what so ever on document it may not be obvious. Otherwise, keep it up!

Collapse
theianjones profile image
Ian Jones Author

Thanks for the feedback! I appreciate it