By Tania Rascia
document object, and the difference between HTML source code and the DOM.
At the most basic level, a website consists of an HTML document. The browser that you use to view the website is a program that interprets HTML and CSS and renders the style, content, and structure into the page that you see.
index.html file and save it in a new project directory.
<!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html>
This code is the familiar HTML source of a new website skeleton. It contains the absolute most essential aspects of a website document — a doctype, and an
html tag with the
body nested inside.
For our purposes, we’ll be using the Chrome browser, but you can receive similar output from other modern browser. Within Chrome, open up
index.html. You’ll see a plain website with our heading saying “Document Object Model”. Right click anywhere on the page and select “Inspect”. This will open up Developer Tools.
Under the Elements tab, you’ll see the DOM.
In this case, when expanded, it looks exactly the same as the HTML source code we just wrote — a doctype, and the few other HTML tags that we added. Hovering over each element will highlight the respective element in the rendered website. Little arrows to the left of the HTML elements allow you to toggle the view of nested elements.
In Developer Tools on index.html, move to the Console tab. Type
document into the console and press
ENTER. You will see that what is output is the same as what you see in the Elements tab.
Output#document <!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html>
document and otherwise working directly in the console is not something that you’ll generally ever do outside of debugging, but it helps solidify exactly what the
document object is and how to modify it, as we will discover below.
Currently, with this example, it seems that HTML source code and the DOM are the exact same thing. There are two instances in which the browser-generated DOM will be different than HTML source code:
The console will respond with this output:
Output<body> <h1>Document Object Model</h1> </body>
document is an object,
body is a property of that object that we have accessed with dot notation. Submitting
document.body to the console outputs the
body element and everything inside of it.
In the console, we can change some of the live properties of the
body object on this website. We’ll edit the
style attribute, changing the background color to
fuchsia. Type this into the console:
- document.body.style.backgroundColor = 'fuchsia';
After typing and submitting the above code, you’ll see the live update to the site, as the background color changes.
Switching to the Elements tab, or typing
document.body into the console again, you will see that the DOM has changed.
Output<body style="background-color: fuchsia;"> <h1>Document Object Model</h1> </body>
Note: In order to change the
background-color CSS property, we had to type
fuchsia to the background color of the
body, is now a part of the DOM.
The other instance in which the DOM might have a different output than HTML source code is when there are errors in the source code. One common example of this is the
table tag — a
tbody tag is required inside a
table, but developers often fail to include it in their HTML. The browser will automatically correct the error and add the
tbody, modifying the DOM. The DOM will also fix tags that have not been closed.
In this tutorial, we defined the DOM, accessed the
document object, and went over the difference between HTML source code and the DOM.
For more in-depth information on the DOM, review the Document Object Model (DOM) page on the Mozilla Developer Network.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Click below to sign up and get $200 of credit to try our products over 60 days!
Your tutorial is good~!! Thanks a lot ^^
Sat through a couple Web Dev lessons and every time they mentioned the DOM I was a deer in headlights. I now get the basic concept, so thanks!
Cool stuff. Tania you are doing good job. keep it up
Hi! Very interesting. Thanks for the info.
All the best, 🖖🏼
This tutorial has given me a clear and in depth understanding of the DOM. Thank you for taking the time to put together this tutorial. You are a good teacher, please keep up the good work.
Hi there! I am very newbie at coding and everytime CSS “get’s in my way” I feel like I don’t understand the basics :( I am looking forward to learning more with your tutorial! Thanks a lot : )
)) for beginners cool