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
Ref: A Codecademy training that I attended.