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.

Let's Connect

Keep Reading


A brief description of HTML, before suggesting a couple free courses.

Jun 24, 2020

WTF is JavaScript?

A brief description of JavaScript, with a few links to dig in and learn more.

Jun 29, 2020

WTF is Component-Driven Development?

If the web is organized by pages, shouldn't we build it that way? Introducing component-driven design and development, explained through the lens of the evolution of the web.

Jul 06, 2020