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.
Latest comments (8)
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.
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!
Thanks for the feedback! I appreciate it
Did you know that #document is a node as well. I guess that makes sense given that
document.bodyanddocument.headare 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.
What are some other gaps that you have discovered lately?
Great question!
I have written a lot of posts lately about wierd bits I thought I knew.
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.
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!