Document Object Model Redux

The DOM Level 1 attempts to standardize the JavaScript Document object to support the manipulation of arbitrary HTML elements and text objects while at the same time providing support for most commonly supported Document properties, collections, and methods. This backward support is often termed DOM Level 0 and is fairly consistent with what Netscape 3 supported except for JavaScript access to plug-ins. The Document properties supported by DOM Level 1 are presented in Table 13-3.

Table 13-3: DOM Level 1 Document Properties and Collections
Document Property or Collection	Description
anchors[]	Collection of the anchors defined by <a name="anchorname" >.
applets[]	The collection of Java applets in the page defined by the <applet> tag.
body	Reference to the object representing the <body> tag that contains the visible document.
cookie	A string holding the document's cookie value if any.
doctype	A reference to the DTD of the document.
documentElement	A reference to the root element of the document. In HTML this is the <html> tag.
domain	The security domain of the document.
forms[]	The <form> tags in the page.
images[]	The collection of images defined by <img>.
implementation	A reference to an object that can determine markup language feature support for the particular document.
links[]	The collection of the links specified by <a> and <area> tags in the page.
referrer	Holds the referring URL if any.
Title	The title of the document.
URL	A string holding the document's URL.

Notice in Table 13-3 how the DOM preserves many of the collections discussed up until now and only adds a few properties such as body, docType, and documentElement to the mix. The only thing missing seems to be lastModified; fortunately, browsers continue to support it.

Method-wise, traditionally the Document object only supported open(), close(), clear(), write(), and writeln(). The DOM Level 1 drops the clear() method, which never really had much use anyway. However, beyond the more staticially oriented write() methods, the DOM provides a variety of methods to dynamically create objects. It adds methods such as createComment(data), which creates an (X)HTML comment of the form <<!-- data -->>; createElement(tagName), which creates an (X)HTML of tagName; and createTextNode(data), which creates a text node containing the value of the paramater data. There are other DOM “create” methods, but they are not generally useful when working with HTML documents.

We also saw in Chapter 10 that the DOM adds three useful methods for retrieving a location in a document:

document.getElementById(elementId) Returns a reference to the object with id="elementId"
document.getElementsByName(elementName) Returns a list of all (X)HTML element objects with name="elementName"
document.getElementsByTagName(tagname) Returns a list of all (X)HTML elements of tagname (e.g., STRONG)

Once we retrieve an object, there are a variety of properties we can look at. For example, recall from Chapter 10 again that every DOM node including an (X)HTML element would have a variety of properties related to its position in the document tree, such as parentNode, childNodes, firstChild, lastChild, previousSibling, and nextSibling. There are also numerous methods such as insertBefore() to add nodes to the document whether they are HTML tags or text nodes. There are also properties to manipulate attributes and values, but this is often easier to perform directly, as we’ll demonstrate later.

Besides the DOM defined properties, understand that under HTML 4 and XHTML all elements have in common a core set of properties related to scripting, style sheets, and accessability (id, class, style, and title) as well as language usage (lang and dir). If you put all these together, you get the complete set of properties and methods common to any HTML element represented in JavaScript. Under the DOM, this object is called HTMLElement, and its properties and methods are summarized in Table 13-4.

Table 13-4: Common DOM Properties for HTMLElement
Common HTMLElement, Property, or Collection	Description
attributes[]	A collection of the attributes for the element, if any.
childNodes[]	A collection of the nodes (text nodes, elements, and so on) enclosed within the current HTML element.
className	The value of the class attribute.
Dir	The text direction of the enclosed text either LTR (left to right) or RTL (right to left) as set by the dir attribute.
firstChild	A reference to the first node directly enclosed within the current HTML element. This will be the same as element.childNodes[0]. Children, of course, can be any type, not just HTML elements.
Id	The text string set by the id attribute for the element.
lang	The language code for the element set by the lang attribute.
lastChild	A reference to the last child in the list of children nodes that are direct decendents of the current HTML element.
nodeName	The name of the HTML element, for example P. Same as tagName.
nodeValue	The value of the node. This property will always be null in the case of HTML elements.
nodeType	The numeric code for the node type. In the case of HTML elements, this will always be 1.
nextSibling	A reference to the next DOM node sibling of the current HTML element.
ownerDocument	A reference to the Document object containing the current element.
parentNode	A reference to the enclosing HTML element
previousSibling	A reference to the previous DOM node sibling of the current HTML element.
style	Access to the inline style specification for the current element. This is a DOM Level 2 property.
tagName	A reference to the name of the HTML element such as OL. This will be the same as nodeName in the case of element nodes.
Title	The text string holding the advisory text for the element set by the title attribute.

As mentioned in Chapter 10, under the DOM Level 1, all HTML elements also have a variety of useful methods. The more commonly used ones are presented in Table 13-5.

Table 13-5: Common DOM HTMLElement Methods
Method Name	Description
*appendChild(newChild***)	This method appends the node in newChild as the last child of the current element.
*cloneNode(deep***)	Makes a copy of the current HTML element. If the parameter deep is passed as true, the copy made includes all nodes enclosed within the current element.
*getAttribute(name***)	Returns the attribute name. Easier to reference directly via the attribute name when known. For example, if myP1 holds a paragraph, myP1.align would hold its align attribute value.
*getElementsByTagName(tagName***)	Returns a list of elements referenced by tagName that are contained within the current element.
hasChildNodes()	This method returns a Boolean value indicating if the current element has children (enclosed elements or text nodes).
*insertBefore(newChild*, refChild**)	Inserts the node newChild into the list of children directly enclosed by the element just before the node referenced by refChild.
*removeAttribute(name***)	Removes the attribute named name. For example, *myP1.removeAttribute("align")* would delete the align attribute for a paragraph called myP1. Of course, it might just be easier to assign attributes back to their default values.
*removeChild(oldChild***)	Removes the node specified by oldChild.
*replaceChild(newChild*, oldChild**)	Replaces the node oldChild with newChild.
*setAttribute(name*, value**)	Returns the attribute name. Easier to reference directly via the attribute name itself when known. For example, if myP1 holds a paragraph, myP1.align would holds its align attribute value.

This section was only meant to remind readers of the basics of the DOM that was already covered in Chapter 10.

Accessing Specific HTML Element Properties

As mentioned in Chapter 10, the correlation between (X)HTML attribute names and DOM property names is nearly one to one. For example, the <<body>> tag would be represented by the DOM object HTMLBodyElement and would have the attributes previously discussed plus those related to its specific attributes, including aLink, background, bgColor, link, text, and vLink. Save for the JavaScript “camel-back” style of writing, these are just the attributes for the (X)HTML tag. While many tags like <<body>> have their own special attributes, there are many (X)HTML elements that only have a simple set of core attributes: id, class, style, and title and language attributes lang and dir. The DOM provides access to these as id, className, style, title, lang, and dir. Numerous (X)HTML elements as listed in Table 13-6 can be associated with the generic DOM object HTMLElement.

Table 13-6: (X)HTML Elements Associated with DOM HTMLElement
<sub>	<sup>	<span>	<bdo>
<tt>	<i>	<b>	<u>
<s>	<strike>	<big>	<small>
<em>	<strong>	<dfn>	<code>
<samp>	<kbd>	<var>	<cite>
<acronym>	<abbr>	<dd>	<dt>
<noframes>	<noscript>	<address>	<center>

All other (X)HTML tags inherit the same property/attribute relationship described in Table 13-6, but some tags have specific attributes beyond these. These tags and their associated DOM properties and, in some cases, methods are shown in Table 13-7. We have bolded the properties that vary from the attribute name because of the camel-back style for easy reference.

Table 13-7: (X)HTML Elements Associated with DOM Objects
(X)HTML Tag(s)	DOM Object	Properties	Methods
<html>	HTMLHtmlElement	Version
<head>	HTMLHeadElement	Profile
<link>	HTMLLinkElement	disabled, charset, href, hreflang, media, rel, rev, target, type
<title>	HTMLTitleElement	Text
<meta>	HTMLMetaElement	content, httpEquiv, name, scheme
<base>	HTMLBaseElement	href, target
<isindex>	HTMLIsIndexElement	form, prompt
<style>	HTMLStyleElement	disabled, media, type
<body>	HTMLBodyElement	aLink, background, bgColor, link, text, vLink
<form>	HTMLFormElement	elements[], length, name, acceptCharset, action, enctype, method, target	submit(), reset()
<select>	HTMLSelectElement	type, selectedIndex, value, length, form, options[], disabled, multiple, name, size, tabIndex	add(), remove(), blur(), focus()
<optgroup>	HTMLOptGroupElement	disabled, label
<option>	HTMLOptionElement	form, defaultSelected, text, index, disabled, label, selected, value
<input>	HTMLInputElement	defaultValue, defaultChecked, form, accept, accessKey, align, alt, checked, disabled, maxLength, name, readOnly, size, src, tabIndex, type, useMap, value	blur(), focus(), select(), click()
<textarea>	HTMLTextAreaElement	defaultValue, form, accessKey, cols, disabled, name, readOnly, rows, tabIndex, type, value	blur(), focus(), select()
<button>	HTMLButtonElement	form, accessKey, disabled, name, tabIndex, type, value
<label>	HTMLLabelElement	form, accessKey, htmlFor
<fieldset>	HTMLFieldSetElement	form
<legend>	HTMLLegendElement	form, accessKey, align
<ul>	HTMLUListElement	compact, type
<ol>	HTMLOListElement	compact, start, type
<dl>	HTMLDListElement	compact
<dir>	HTMLDirectoryElement	compact
<menu>	HTMLMenuElement	compact
<li>	HTMLLIElement	type, value
<div>	HTMLDivElement	align
<p>	HTMLParagraphElement	align
<h1>…<h6>	HTMLHeadingElement	align
<q>	HTMLQuoteElement	cite
<pre>	HTMLPreElement	width
<br>	HTMLBRElement	clear
<basefont>	HTMLBaseFontElement	color, face, size
<font>	HTMLFontElement	color, face, size
<hr>	HTMLHRElement	align, noShade, size, width
<ins>, <del>	HTMLModElement	cite, dateTime
<a>	HTMLAnchorElement	accessKey, charset, coords, href, hreflang, name, rel, rev, shape, tabIndex, target, type	blur(), focus()
<img>	HTMLImageElement	lowSrc, name, align, alt, border, height, hspace, isMap, longDesc, src, useMap, vspace, width
<object>	HTMLObjectElement	form, code, align, archive, border, codeBase, codeType, data, declare, height, hspace, name, standby, tabIndex, type, useMap, vspace, width
<param>	HTMLParamElement	name, type, value, valueType
<applet>	HTMLAppletElement	align, alt, archive, code, codeBase, height, hspace, name, object, vspace, width
<map>	HTMLMapElement	areas, name
<area>	HTMLAreaElement	accessKey, alt, coords, href, noHref, shape, tabIndex, target
<script>	HTMLScriptElement	text, htmlFor, event, charset, defer, src, type
<table>	HTMLTableElement	caption, tHead, tFoot, rows, tBodies, align, bgColor, border, cellPadding, cellSpacing, frame, rules, summary, width	createTHead(), deleteTHead(), createTFoot(), deleteTFoot(), createCaption(), deleteCaption(), insertRow(), deleteRow()
<caption>	HTMLTableCaptionElement	align
<col>	HTMLTableColElement	align, ch, chOff, span, vAlign, width
<thead>, <tfoot>, <tbody>	HTMLTableSectionElement	align, ch, chOff, vAlign, rows[]	insertRow(), deleteRow()
<tr>	HTMLTableRowElement	rowIndex, sectionRowIndex, cells[], align, bgColor, ch, chOff, vAlign	insertCell(), deleteCell()
<td>,<th>	HTMLTableCellElement	cellIndex, abbr, align, axis, bgColor, ch, chOff, colSpan, headers, height, noWrap, rowSpan, scope, vAlign, width
<frameset>	HTMLFrameSetElement	cols, rows
<frame>	HTMLFrameElement	frameBorder, longDesc, marginHeight, marginWidth, name, noResize, scrolling, src
<iframe>	HTMLIframeElement	align, frameBorder, height, longDesc, marginHeight, marginWidth, name, scrolling, src, width

Manipulating an (X)HTML element and its associated attributes is very straightforward once the element is accessed using a method like document.getElementById( ) as shown here:

<<p id="myP1">>Test Paragraph<</p>>
<<form action="#" method="get">>
<<input type="button" value="align left"
 onclick="document.getElementById('myP1').align='left';" />>
<<input type="button" value="align center"
 onclick="document.getElementById('myP1').align='center';" />>
<<input type="button" value="align right"
 onclick="document.getElementById('myP1').align='right';" />>
<</form>>

Adding (X)HTML elements is also straightforward using document.createElement() as shown in this next example, in which we follow the idea of the editor presented in Chapter 10. In this case, we allow the user to type in an arbitrary tag name and value and allow it to be added to the document. We apply a simple check to make sure that the user is not trying to add structural elements or add text content to an empty element, hinting at the type of logic one might start to employ to create a full-blown syntax-driven editor using the DOM.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>Simple DOM Editor 0.2<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<script type="text/javascript">>
<<!--
var dangerousElements = 
{'html':true,'head':true,'body':true,'script':true,'style':true,'frameset':true,'
frame':true};
var emptyElements =
{'hr':true,'meta':true,'br':true,'area':true,'base':true,'basefont':true,'link':
true,'frame':true};
function addElement(theElement,theText)
{
 if (theElement in dangerousElements)
   {
       alert("Error: Element not allowed");
       return;
      }
 var newNode = document.createElement(theElement);
 if ((theText.length >> 0) && !(theElement in emptyElements))
  {
   var newText = document.createTextNode(theText);
   newNode.appendChild(newText);
  }
 else
   alert("Warning: Do not add text to an empty element");
 document.getElementById('insertHere').appendChild(newNode);
}
//-->>
<</script>>
<</head>>
<<body>>
<<div id="insertHere" style="width: 80%; border-style: dashed; border-width: 1px;">>
      &nbsp;
<</div>>
<<form action="#" method="get" name="theForm" id="theForm">>
 <<input type="text" value="i" name="theTag" id="theTag" />>
 <<input type="text" name="theText" id="theText" value="Testing 1..2..3.." />>
 <<input type="button" value="Create"
onclick="addElement(document.theForm.theTag.value,document.theForm.theText.value);
"  />>
<</form>>
<</body>>
<</html>>

It would be quite laborious and repetitious to demonstrate the creation of each and every tag from JavaScript. They all follow in the same spirit as the previous example. Interested readers can delve into Appendix B, which contains the complete listing of all (X)HTML-related properties from the DOM Level 1. However, before concluding this chapter, it is time to take a look at one (X)HTML element that continually causes developers trouble—the table.