mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Tech Stuff - DOM Page Structure and Navigation

Page Navigation and Structure

You gotta get a couple (or 50) basics clear in your mind before you start messing around with this DOM stuff. Then it's a real breeze (oh yeah!). All the examples below use javascript. If you don't know javascript you're out of luck! Observant readers may conclude that this page was written in the depth of winter when the author was nasally challenged. They are correct. Some humour, however, does not stand the test of time.

Your Document is stuck in the Window

The DOM-2 is concerned with the document and is NOT concerned with (and does not standardise) the browser window object, window attributes and capabilities are browser specific though mostly based on the old netscape specs. Here is our rough definition of the window and document:

If you wrote it it's DOMable

The first key point, which may seem simple, is that the DOM provides methods to access and manipulate the HTML (XHTML/XML) of the document nothing else. Javascipt, or whatever scripting language you use, does the processing. You use the various DOM interfaces, in the W3C's quaint jargon, to access your page's HTML tags (elements) and attributes. It's that simple. Took us 6 weeks to figure this out from all that jargon!!

My Node is Cold

The DOM-2 defines everything, and they mean everything - including whitespace and those end-of-line thingies in a document as a node each of which may have other nodes hanging off it in a hierarchy. We can get a list of all the nodes at any given Node using the childNodes attribute. Nodes have the attribute (property) called nodeType which tells you what you can do with it, what interfaces it supports. Nodes with a nodeType of Element (an HTML element like A for anchor) will typically have further nodes and using this process you can iterate through the entire document. The following, very simplified, diagram illustrates the basic idea.

Note: The structure below assumes you do use a <!DOCTYPE declaration - well we're all well behaved HTML coders - aren't we. If you don't then doctype will not be present.

nodal document structure

May the bird of paradise fly up your Node

To navigate around nodes you use a mixture of attributes. In the simplified diagram below, to get to the parent node from the current node use the parentNode attribute. To get all the child nodes use the childNodes attribute. To get the first (top) child node use the firstChild attribute. To get the last child use the lastChild attribute. To move from node to node in a DOWN direction use the nextSibling attribute and in an UP direction use the previousSibling attribute.

node relationships

The DOM-2 includes a quaintly named spec called the Traversal and Range Specification which provides NodeIterator, TreeWalker and NodeFilter interfaces to help in navigating a document.

Psychophrenia as a programming Technique

DOM thingies may have multiple personalities (they may support multiple interfaces). They inherit, in techno-jargon, the methods and attributes from all their ancestors - their parents and possibly their parents's parents and... you get the picture.

// this example assumes you have gotten a node
// we'll see how later. Assume, for now,
// it's an automagical process
// now get a list of all the thingies at this node
// in an array
thingylist = ournode.childNodes;
// get the first thingy
thingy = thingylist[0];
// thingy has all the node methods and attributes
if(thingy.nodeType == 1) // is it an element?
{
  // now thingy has all the element methods and attributes
  // if it's also in an HTML document thingy has all 
  // the HTMLElement methods and attributes
  if(thingy.nodeName == "A")
  {
    // now thingy has all the HTMLAnchor methods 
    // and attributes as well
  } 
}

By progressively testing for the node capabilities in the above example our friendly (but barren) node ends up being quite rich in methods and attributes. Which method or attribute you use and from which life (node, element. HTMMLElement or anchor) is entirely up you and what you want to achieve. Mix and match anyway you want at anytime.

Where's my Node

To find any node in a document you have three choices

  1. Give it an id in the HTML e.g. <p id='firstparagrah'>, then you can reference it using document.getElementById('firstparagraph') method of the document object. This is the best, easiest and most reliable way.

    Note: The key point here is that each id is defined by the specification to be unique within a document. The W3C validator especially gets very upset if this is not true.

  2. You can start at the root of the document and slog your way through it using the childNodes attribute of the node (using a code fragment like this) and hope you eventually find what you are looking for.

  3. If you know the type of node you are looking for, say it's a table, you can use the document.getElementsByTagName("table") method of the document.

Where the #!***? am I?

If you are iterating your way through a document at some point you got to try and figure where you are. And what kind of nodes you are looking at so that you can use the allowable methods and attributes, or apply the appropriate interface in the W3C jargon to achieve your goal. If, after all that effort, you can remember what it was. There are two attributes (and only two) that can help you here.

Let's get under the hood and pull it to bits

It you are into masochism you can play with this stuff and deconstruct an HTML page. You can explore a page here using our early programming experiments OR by far the best tool we've come across is Mozilla's DOM Inspector a stand-alone page inspector/explorer which ships as standard with Mozilla. Update: Almost all the browsers now ship with some kind of DOM explorer - usually under 'Developer Tools'.



Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Stuff

RSS Feed Icon

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

Search

web zytrax.com

Share

Icons made by Icomoon from www.flaticon.com is licensed by CC 3.0 BY
share page via facebook tweet this page

Page

email us Send to a friend feature print this page Display full width page Decrease font size Increase font size

Resources

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS2.1
W3C CSS2.2
Default Styles
CSS3 Selectors
CSS 3 Media Queries
CSS 3 Colors

DOM Stuff

W3C DOM
W3C DOM 3 Core
W3C 3 Events

Accessibility

usability.gov
W3C - WAI
Web Style Guide
WebAim.org

Useful Stuff

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com

Our Stuff

Our DOM Pages
DOM Navigation
Liquid Layout
CSS Short Cuts
CSS overview
CSS One Page

Javascript Stuff

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2017 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: October 21 2015.