The DOM (Family) Tree

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *