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.”
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!