Document Hierarchy

Please read pages 25 - 27 from the Stylin' textbook. This lecture document covers the concepts on those pages and emphasizes the terminology. This material will be covered in more depth in future weeks.

Page 25 of the text has this snippet of code with the elements listed. The actual content has been removed and you see only the elements within the document hierarchy:

<body>
     <div id="logo">
          <img  />
          <h3>   </h3>
     </div>
</body>

The author shows this image of the relationship between the different elements in the document:

Hierarchy flow chart

Terminology

Parent: In terms of an object oriented environment's hierarchy, the parent is the element directly above the current element.; In the image above, the parent of the DIV element is the BODY element. If the BODY element is styled, then the DIV (and any elements nested within) inherit the properties of the parent. If the BODY element is styled to display text in the Verdana font-family, then all text in the body, and any elements contained within, will be displayed in the Verdana font-family - the entire document displays in the Verdana font-family.; The parent of the IMG and H3 tags is the DIV element directly above them. If the DIV is not styled, then these children (the IMG and H3 elements) inherit the characteristics/properties of the DIV's parent (in this case, the BODY element). Text will display in the Verdana font-family.; If the DIV element is styled to display a different font such as Arial, then all elements within the block-level DIV element will inherit the properties of their parent. The H3 tag will display in the Arial font-family. This overrides the BODY style because the child (H3) inherits the properties of its parent (the DIV element).; Text elsewhere in the document displays as Verdana but the text inside the DIV element displays as Arial. The H3 element inherits the characteristics/properties of its parent whose font-family is set to Arial. Other elements elsewhere, which are not inside this DIV element, inherit the properties of their parent - the BODY element - and will display in the Verdana font-family.
Children: Each element has a parent, the element directly above it.; In the code above, the DIV element is a child of the BODY element—it is contained directly under the parent element of BODY. The DIV element inherits any properties directly from its parent.; The IMG and H3 tags are each children of the parent DIV element.; If the DIV element is un-styled, then the H3 inherits from its parent (DIV) which then inherits from its parent (BODY).; If the DIV is styled, then the child (H3) inherits directly from its parent, the DIV element.
Siblings: Siblings are elements located at the same level in the hierarchy. In this example the IMG and H3 tags are siblings.; Siblings have the same parent element.
Ancestors: An ancestor refers to the object(s) from which an element descends.; The BODY tag is the ancestor of the DIV, IMG and H3 tags all contained within (under) it.; The DIV tag is the direct ancestor of the IMG and H3 tags.; The IMG and H3 tags are not ancestors - there are no elements below these tags in the hierarchy. They have no children.
Descendants: Descendants refer to objects below in the hierarchy. The DIV element is a descendant of the BODY tag. Just as the IMG and H3 tags are direct descendants of the DIV tag. In addition, the IMG and H3 tags are indirectly descended from the BODY tag.

A Graphic View of How Elements Relate

Here is a a different way to view the elements in the Document Object Model (DOM) of the selected document.

Firefox has a menu command of "Tools/DOM Inspector" which, when opened in this simple document, displays the following:

DOM Display

Note: if the DOM Inspector does not appear in the Tools menu, you may need to re-install Firefox using the Custom installation option. See the Installing Firefox

document for details.

The document's elements are displayed in a hierarchy - the DIV element is indented (contained) within the BODY element, and the IMG and H3 elements are contained within the DIV element.

This menu command takes a little practice and "getting used to" but it graphically displays the elements within the document. This is a useful tool if you are trying to de-bug your document and the styles are not working as you might expect.