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.

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

Benzer Yazılar
Design Week Turkey 2017

On the preveous week, I was at the Design Week Turkey in Istanbul. As I was invited by the organization Devamı »

Phone number usage on mobile web pages

I love usability, don't you? Even the smallest touch to the user experience will worth more then the effort to Devamı »

Separation of Concerns

Separation of concerns is a design principle stating that code should be separated based on its purpose in a program. Devamı »

Leave a Reply

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