The Document Object Model

The Document Object Model is “a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents” (http://www.w3.org/DOM/#what), as quoted from the W3C. It is, for all practical intents, a way of describing the relationship of parts of an HTML document. While the DOM is intrinsic to scripting, it also plays a role in CSS, and having an idea of how it works is a Good Thing when learning code.

While HTML should semantically describe the individual pieces of content, the DOM refers more to how these pieces relate to each other. It is based on a parent-child-sibling model. This model, again, is critical for scripting, and very useful for CSS.

HTML

This is the code for the left-hand navigation menus on this page:

<div id="nav">
<ul>
	<li class="nav_head">MAIN</li>
	<li><a href="../index.html" title="Web Main">Web Main</a></li>
	<li><a href="../../index.html" title="Tech Main">Tech Main</a></li>
	<li><a href="../../../index.html" title="Fine 
	Arts Main">Fine Arts</a></li>
	<li><a href="http://www.fontbonne.edu/" title="Fontbonne 
	University">Fontbonne</a></li>
</ul>

<div id="subnav">
<ul>
	<li class="nav_head">WEB TECH</li>
	<li><a href="index.html" title="Web General">General</a></li>
	<li class="here"><a href="../code/index.html" 
	title="Coding Front">Code</a></li>
	<li><a href="../css/index.html" title="CSS">CSS</a></li>
	<li><a href="../forms/index.html" title="Forms">Forms</a></li>
	<li><a href="../imaging/index.html" title="Imaging">Imaging</a></li>
	<li><a href="../script/index.html" title="Scripting">Scripting</a></li>
	<li><a href="../design/index.html" title="Design Notes">Design</a></li>
	</ul>
</div>
</div>

It should be fairly apparent how the relationships work: tags are nested within tags, the div elements seem to be of a higher order, etc. This is pretty much how the DOM looks at it as well, but there are some refinements.

DOM

This is how the DOM sees the code:

Reading the diagram is not that difficult. Tags are represented by rectangles, and text nodes by ovals. The arrows go from the parent element to the child. Any two elements directly connected have a parent-child relationship, such as html to body or the uls to the lis.

The parent of everything is html. It’s child (in the diagram) is body. body has a single child, the nav div. This nav div has two children, one is an unordered list, and the second is the subnav div. Anything below anything else is a descendent, but may not be a child. For instance, any of the list items (li) are descendants of their respective divs, but they are not children (directly related).

When scripting, the DOM makes use of parent elements, as well as first-child. CSS selectors can make use of descendants, children, or siblings.