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:

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:

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:

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!