The DOM subject is generally taken lightly to new coders or designers. I stumble upon a very nice explanation today and wanted to share here.
The DOM is a tree of objects based on the HTML document that is created by the browser when it loads a page. Every element in this page exists on some branch of the tree, with elements above it, and possibly next to or below it.
<div class='parent'>
<div class='child' id='sibling1'>
<p class='grandchild'></p>
</div>
<div class='child' id='sibling2'></div>
<div class='child' id='sibling3'></div>
</div>
Elements inside other elements are considered descendants. We use family words to refer to these relationships. For instance, an outer <div> would be considered the parent of any <div>element inside it (those with class 'child' above). Any other <div>s inside of 'parent' on the same level as 'child' are considered siblings of each other. A <p> in any 'child' would itself be a child of the 'child' element that contains it and a grandchild of 'parent'.
Ref: A Codecademy training that I attended.