What the heck is the HTML DOM?!

As you started learning about the web, you definitely must’ve come across the DOM, but you probably haven’t really understood what it is and why we need it. So let’s talk ‘bout it for a min.

According to Wikipedia, “The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree..” blah blah🤦‍♂…too much grammar.

Let me illustrate it this way:

Think of a boutique. A boutique has a lot of things including mannequins. Mannequins among other things help dressmakers to display or fit clothing.

In a similar way, all webpages have something like mannequins under the hood. That thing is called DOM.

Because of the DOM, languages like JavaScript can “dress up” some areas of a webpage.

This webpage you’re currently scrolling through has a DOM.

Because of the DOM, when you toggle that button on the top right corner of this page, Javascript changes the “outfit” of this page.

The DOM is like the mannequin of a webpage in the eyes of languages like JavaScript.