DOM - Blonde Dictionary


DOM or Document Object Model is a concept that you will need to understand if you want to use JavaScript to make your website dynamic. The good news is that it's pretty simple! Mozilla resource for developers defines DOM as a "programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content."

It is basically a model of how your HTML objects are related within the document (which will later allow you to select the particular element that you need and alter it). When your browser loads a page, it automatically creates a Document Object Model for it and applies JavaScript code to them. W3School lists all the things that JavaScript can do to these elements to make your page dynamic:

  • JavaScript can change all the HTML elements in the page
  • JavaScript can change all the HTML attributes in the page
  • JavaScript can change all the CSS styles in the page
  • JavaScript can remove existing HTML elements and attributes
  • JavaScript can add new HTML elements and attributes
  • JavaScript can react to all existing HTML events in the page
  • JavaScript can create new HTML events in the page

But back to DOM:

You can imagine it as an HTML family tree - showing the relationships between different elements (objects) as if they were family members. Some of them are children, while some are siblings:

DOM Coding Blonde family tree

In Russian "dom" means house (it's spelt "дом"), and in fact I find it easier to associate the concept with a big family house, rather than with documents and objects. Maybe it also helps that my family is pretty big and super confusing, but I literally imagine all the elements as members of a huge family, living in their different rooms/houses, having children (in this case the closing tag </> is the other parent haha!) and just being themselves. For example, <ul> (unordered list tag) has lots of children who might misbehave, while <ol>'s (ordered list tag) children are super organised ;)

Here's another image that may help you visualise how it works:

DOM html code Coding Blonde

In some cases you may even want to draw out the tree to help you visualise the family structure. It is super useful because it allows you to create dynamic websites and the concept is pretty simple so it's worth learning!

<the blonde>