Document Object Model Crawler

The ubiquitous HTML anchor tag. Links to other resources on the Internet provided through anchor tags are what make the web go round.

The base tag specifies the base pathname for all relative URLs in the document.

The body of an HTML document contains everything that is intended for human consumption. An organizational structure is imposed on this content by using HTML elements such as divisions, paragraphs etc. The best, though somewhat illogical, way of accessing this object is document.body.

Use the <button> button tag to create buttons that are easier to style and can contain images - unlike buttons created using the <input> tag.

The <code> tag is intended for the presentation of source-code listings. Typically, browsers use a monospace font, e.g. Courier, to render text enclosed by this element.

<dd> defines the "definition"& in a definition list.

The <div> tag provides a means to break up a document into logical sections. divs are block elements - i.e. they are capable of acting as containers for other HTML elements. This coupled with scripting and the ability of divs to display borders, use padding and margins offers a powerful tool for creating user interfaces in a web page that rival the look and feel of traditional executable applications.

The <dl> tag is used to present a list of definitions - a term followed by its definition. The default formatting of definition lists in all browsers discussed here - IE, Firefox, Opera and Safari for Windows - leaves much to be desired. Much CSS styling is generally required before this family of tags can be used as part of a consistent page design.

document represents the document downloaded to the browser in its entirety. It provides a general view of representing documents - be they HTML, XHTML or XML. For an excellent overview of properties, methods and events of this object see here.

There is a complete lack of consistency in the manner in which different browsers report document properties. For instance, the Mozilla family of browsers will populate document.anchors only with those anchor, <a>, elements that have a name attribute. IE on the other hand will happily report all anchors.

Strictly speaking document is the direct owner of only a two objects -

• The document prolog - a sequence of instructions telling the browser how the document should be handled. In an HTML document the prolog consists of a simple DOCTYPE! declaration. An XML document may contain additional processing instructions which bear the general form <?name instruction?>.
• The root element - this is the all enclosing element which contains everything in the document that is interpreted by the browser once it has understood the instructions in the prolog. In the HTML DOM this turns up as documentElement.

So one should not really use document properties such as document.anchors? Well, in an ideal world that is what one would do. In practice this is not always possible. The simplest way to refer to objects defined in the visible portion of a document is via document.body. The simplest way to find such objects is by using the document.getElement... family of methods - never mind that both body should really have been a property of documentElement and the various getElement... functions its methods.

A word of caution on the use of the getElement... methods. In principle anything that goes between <...> defines an HTML element. This includes tags such as <base> and <style>. In Opera and Safari one can define the id attribute for such elements and then use document.getElementById() method to find them. This does not work in Firefox and IE. The use of document.getElementsByTagName()[0] offers a partial solution.

<dt> defines the "term"& part of a definition in a definition list.

<em> is an intrinsic HTML styling tag. Its use does not fit in with the philosophy of using CSS to do all styling and HTML purely for content. It is nevertheless very useful. Browsers vary in just how they render emphasized text. Consequently, it is advisable to style this tag using CSS in order to ensure consistency with the rest of your page design.

Use <form> tags to create areas in your document where you can

• provide interactive controls - such as edit and check boxes - for user input
• collate user information and send it on to another Internet location for analysis and action.

The manner in which such information is packaged before being shipped off is determined by enctype and method attributes of the form object - a subject that is discussed at length here.

frames provides an array of all the <frame and <iframe objects in the current document. Use window.frames.length determine the number of frames. The contents of a frame can be examined and otherwise manipulated - so long as the document displayed within it comes from the same domain. This is a constraint imposed by all good browsers in the interests of security.

The head section of an HTML document contains information that is used by browsers and search engine robots but is not directly displayed as part of the document. As usual, there is a grey area here - browsers use the contents of the <title> tag as the window caption. The key phrase here is "not directly displayed". Information in the <style>, <map> and <script> tags as well as information brought in via <link> tags influences the appearance of the document in the browser and/or its interaction with the viewer.

Headings in HTML serve the same purpose as the heading styles offered by wordprocessors. Headings have a long lineage going back to the very early days of HTML. Consequently their use does not merely impose a logical structure on a document but also creates visual effects - something that should normally be in the domain of Cascading Stylesheets.

history is an array containing the viewer's browsing history. Browser security policies place severe constraints on what can can be done with this object. Thus, while it is possible to verify that the user has been very busy by checking window.history.length any attempt to determine the precise nature of sites visited by the viewer will be firmly blocked.

<hr> Places a horizontal rule on your web page. It can be styled to various extents - depends on the browser. If you need anything more than an basic horizontal rule consider styling the top/bottom border of a <div> instead. There are times when horizontal rules are quite handy. However, it is questionable whether they should be used since they break the rule:

"HTML for content, CSS for appearance and JavaScript for interaction"

that should, in an ideal world, be the cornerstone of good page design. Needless to say, in practice things are not so clear cut - does CSS not offer the ability to introduce interactivity by styling hover effects with various HTML elements?

documentElement represents the root element - everything that the browser should interpret - of the document. Once the browser has established the nature of the document by examining the prolog - instructions on how to handle the document - it does the following

• Identifies the presentational instructions in the document and acts on it - this would typically involve fetching external stylesheets, scripts etc - if appropriate.
• Uses these data and other instructions - e.g. maps - to present the content intended for human consumption to the viewer.

An HTML document contains nothing other than a DOCTYPE! declaration followed by the root element. Consequently, it is frequently possible to access the root element as document.firstChild. However, this is not safe - an XML document may have multiple processing instructions etc. which may result in firstChild not being the same as documentElement.

frames and iframes provide a mechanism for displaying multiple HTML documents on the same web page. There can be valid reasons for wanting to do so - for instance you could put a PDF document offering help on the subject at hand inside a frame or, even better, an iframe. However, you should be aware that search engine robots index individual documents. These documents risk turning up in search engine results pages and being viewed out of context. To make matters worse the original, frame-reliant, web page where these documents are referenced may never turn up in search results because it has little/no indexable content.

Use the <img> tag to place images on your web page. The browsers discussed on this site - IE, Firefox, Opera and Safari for Windows - do a good job of supporting all major image file formats. As a general observation for still images to embellish your web page the PNG format is your best bet.

<input> is the chameleon of HTML tags. Its type attribute can be used to turn it into an edit box, a masked edit, a radio button... .

Ever been irritated by a site which uses forms where checking checkboxes or selecting a radio button does not work if you click on the text caption alongside the control? This can be avoided by associating a label with the control. In general, use the <label> tag to provide a clickable caption for a control.

<li> denotes individual items in a bulleted or numbered list. To ensure consistency it is best to style the parent ul/ol tag so the viewer sees the same bullet style, font etc. in all browsers.

The link tag with its rel attribute set to "stylesheet" is used to link the document to external stylesheets. rel can take other values such as "next", "prev" etc. Opera makes some effort to provide access to such documents in its toolbar. The other browsers ignore such links.

The location object provides information relating to the origins of the current HTML document - its URL, the protocol used to download it etc. Browsers are funny creatures - they go to great lengths to protect the security of their users but at the same time provide methods that can be used to cause them to crash with very little effort. For instance, a misplaced call to the location.reload() method is all it takes to put most browsers in an interminable loop.

The map tag is used in conjunction with the img to define a client-side image map. This provides distinct clickable areas within the displayed image. This tag modifies the interactivity of the HTML document. It does not result in any changes to what is displayed. Consequently, the rightful place for it is in the head section of the document.

The meta tag bears one of two forms

• <meta name="name" content="content" />
• <meta http-equiv="instruction" content="content" />

The first form is used largely to provide instructions to search engine robots - e.g. a page description, a request not to follow links in the document etc. The latter form is intended to provide information to be treated as though it were part of the HTTP response header from the server. However, browser support for http-equiv is patchy and variable - i.e. it is best not used.

If the browser provides access to the meta object it can certainly be modified via JavaScript. However, such modifications would have little practical utility.

The rightful place for the navigator object is at the top of the HTML DOM hierarchy. Since it represents the browser application itself the current document window and the windows for all the other documents that are being viewed in the browser are owned by it should be available as navigator.windows. HTML is simple and the HTML DOM is logically structured - most of the time. However, every once in a while things get murky.

Use the <ol> tag to create numbered lists in your HTML document. Lists can be nested. Not all browsers respond well to having bullet lists nested inside number lists. The reverse works just fine.

It should come as no surprise that the opera object is specific to the Opera Browser. Opera is a great browser - one which deserves far more recognition that it gets. It comes with a number of features that make developing and debugging complex HTML documents a real pleasure. Three of the best of these features are

• User JavaScript is a script specified by the user which is available to every page visited using the Opera browser. For a thorough tutorial click here.
• The opera.postError() function offers an attractive alternative to the JavaScript alert function for debugging purposes. Visit this page for an overview of the debugging facilities offered by Opera.
• The opera.buildNumber function provides a relatively safe way to detect the Opera browser.

A most peculiar bug that afflicts Safari for Windows and IE - using id="opera" for any tag in the document results in window.opera returning an object which can lead to unforseen scripting errors. Why does this happen? Apparently because both browsers willingly report an object when window.id is queried and id happens to be assigned to some object in the document!

Use <optgroup>...</optgroup> to group entries in a list or combo box that form a logical group.

<option>...</option> wraps individual entries in a combo or list box.

Paragraphs serve as containers for raw text and inline images - such as spans and images. They cannot act as containers for block elements such as HTML divisions.

By default carriage returns and multiple spaces in an HTML document are ignored by browsers. However, there are times - for example when providing sourcecode listings - when it is essential to display text formatted in a very precise way. Enter the <pre> tag.

Used as the pair <q>...</q> to wrap the enclosed text in quotes. CSS styling of this tag in order to ensure uniformity of font, font-size etc with the rest of the document is advisable.

The script tag places a script - typically, JavaScript - intended for client-side execution in the document. The script can be embedded directly in the document. Alternately, the tag can be used to simply point to an external script by specifying its src attribute.

The <select> tag is used to create combo and list boxes. Individual items in the combo/list are wrapped in <option> tags. Unfortunately, selects are not quite as easily amenable to CSS styling as most other HTML elements. A partial workaround is discussed here.

The <span> tag does exactly what it says - provides a mechanism for turning a span of text into a distinct inline HTML element. Typically, you would do this to

• Apply formatting effects - font, color, style etc - to a short run of text by assigning the class attribute for the span or using inline styling via the style attribute.
• Make the text identifiable by assigning the id attribute for the span so it can be manipulated later using JavaScript.

The style tag defines a stylesheet in the document. All the stylesheets in the document are available via the document.styleSheets array. Individual rules in each stylesheet are available via the document.styleSheets[n].rules array in IE and document.styleSheets[n].cssRules in the other browsers.

document.styleSheets returns an array containing all the stylesheets in the document. The individual rules in each stylesheet can be accessed using the cssRules array in all browsers other than IE which prefers just rules instead.

<sub> subscripts the enclosed text. By default the font-size is somewhat reduced - the extent depends on the browser and on user preferences. As with all other HTML tags it can be subjected to styling to make it behave differently. Another HTML tag that does more than just enforce structure on the document.

<sup> superscripts the enclosed text. By default the font-size is somewhat reduced - the extent depends on the browser and on user preferences. As with all other HTML tags it can be subjected to styling to make it behave differently.

There is perhaps no HTML element that has been quite as reviled as the <table>. However, tables do have a purpose - to display tabular data! The problem with tables is that they are frequently used to impose a layout on a web page. On occasion things get even worse - in their quest for that perfect layout some designers end up nesting tables! None of this is necessary - a judicious use of CSS styling on HTML divisions and assigning their float and position attributes can deliver the same effects as a table - and often more.

Tables are inherently non-linear in nature. This can pose quite a challenge for screen readers used by the visually challenged. The use of head, body and foot sections in your table can make matters easier.

Use the <textarea> tag when you need a multiline edit control on your web page or form. When using this control be aware that, unlike an edit box created using the <input> tag, it does not have a maxlength property that you can use to limit the length of text entered. We have discussed a workaround to this problem elsewhere.

<tbody>...</tbody> contains the rows that make up the body of a table.

The <td> tag is used to define individual cells in a table.

If your table has footer rows they should be wrapped in <tfoot>...</tfoot>.

<thead>...</thead> contains the row(s) that make up the table heading.

The title tag does what it says - defines the title of the document. This turns up in most browsers as the window caption. Search engines, at their discretion, use this information when they present search results. Google Webmaster Tools provide feedback on what Google thinks of your page titles - too long, too short, not descriptive etc.

Each section in a table - head, body and foot - is made up of one or more rows. <tr>...</tr> delimits individual rows.

Use the <ul> tag - unordered list in HTML speak - to create bullet lists in your HTML document. Lists can be nested. Not all browsers respond well to having bullet lists nested inside number lists. The reverse works just fine.

The Window object owns everything that is displayed or otherwise interacted with when an HTML document is displayed in a browser. Depending on where the document is displayed window can mean one of the following

• The browser window - e.g. a document displayed in IE6.
• A tabsheet in a browser that understands tabs - IE7, Firefox or Opera
• An <iframe> or <frame> used to display a document within the context of another document.

Strictly speaking references to all objects in the DOM should be in the format window.object.object.... In practice most browsers are perfectly happy dealing with references that leave out the initial .window part.