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.
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.
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
body or the
uls to the
The parent of everything is
html. It’s child (in the diagram) is
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).