All Posts

WTF is the DOM?

A brief introduction to the DOM with a quick example on manipulating it, and a link to digging in deeper.

A web page is just a file, or a representation of a file. Usually an HTML file. The DOM, or document object model, is the API through which that file's HTML code can be accessed and manipulated.

The DOM is technically separate from JavaScript, but is often seen in use through JavaScript. For example, the following code gives us a list of all links (anchor tags/) on the page:

const allLinks = document.getElementsByTagName("a")

It is through the DOM that the contents of the HTML page can be manipulated. For example, I could take the allLinks object from above and make them all red.

for (let link of allLinks) link.style.color = "red"

Run those two lines in the browser after the page has been loaded and it will turn the links on the page red!

Make Links Red

That's a very brief introduction to the DOM, but that's all it is at a very high level — a programmatic representation of the HTML code that is the basis for what you see on screen when viewing a web page.

If you'd like to learn more MDN has an excellent introductory page on the DOM that goes into a lot of detail.

Want to receive approximately one email every month with new articles, tools, and references I've discovered? Sign up below.

Read past issues.

Social Links
Site References