The DOM and HTML Elements

Now that we have presented both how to create (X)HTML elements and how to set and manipulate attributes, it should be clear how very intertwined markup and JavaScript have become as a result of the DOM. In short, to effectively utilize the DOM, you must be an expert in (X)HTML syntax, since many object properties are simply direct mappings to the attributes of the (X)HTML element. For example, the paragraph element defined under HTML 4.01 has the following basic syntax:

<<p align="left | center | right | justify"
     id="unique id"
     class="class name"
     style="style rules"
     title="advisory text"
     lang="language code"
     dir="text direction either LTR or RTL">>
   paragraph content
<</p>>

DOM Level 1 exposes most of these attributes in the HTMLParagraphElement, including align, id, className, title, lang, and dir. DOM Level 2 also exposes style, which we’ll discuss in the next section. The various event handlers, such as onclick and onmouseover, are also settable (through mechanisms discussed in the next chapter).

All HTML element interfaces derive from the basic HTMLElement object that defines id, className, title, lang, and dir. Many HTML elements do not support any other attributes. Such elements include

HEAD
Special: SUB, SUP, SPAN, and BDO
Font: TT, I, B, U, S, STRIKE, BIG, and SMALL
Phrase: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ACRONYM, and ABBR
List: DD and DT
NOFRAMES and NOSCRIPT
ADDRESS and CENTER

Beyond the core attributes, the rest of an element’s properties follow (X)HTML syntax. In fact, if you are already intimately familiar with (X)HTML, it is fairly easy to guess the DOM properties that correspond to HTML element attributes by following these basic rules of thumb. If the attribute is a simple word value like “align,” it will be represented without modification unless the word conflicts with JavaScript reserved words. For example, the <<label>> tag, defined by HTMLLabelElement, supports the for attribute, which would obviously conflict with the for statement in JavaScript. To rectify this, often the word “html” is prepended, so in the previous case the DOM represents this attribute as htmlFor. In a few other cases, this rule isn’t followed. For example, for the <<col>> tag, attributes char and charoff become ch and chOff under the DOM Level 1. Fortunately, these exceptions are few and far between. And finally, if the attribute has a two-word identifier such as tabindex, it will be represented in the DOM in the standard JavaScript camel-back style, in this case as tabIndex.

The only major variation in the HTML-to-DOM mapping is with tables. Given the increased complexity of tables under HTML 4.0, there are numerous methods to create and delete various aspects of tables, such as captions, rows, and cells, as well as HTML 4.0 tags like <<tfoot>>, <<thead>>, and <<tbody>>. These are all detailed in Appendix B and are demonstrated in Chapter 13.

Last, in order to support traditional JavaScript programming syntax, you will find a number of methods and properties of the form element itself as well as the various form field elements like input, select, textarea, and button. We’ll discuss form manipulation in-depth in Chapter 14.

As a brief demonstration of just what can be done with the DOM, the following example demonstrates a very simple HTML creation tool using DOM methods.

<<!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>>DOM HTML Editor 0.1<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<script type="text/javascript">>
<<!--

function addElement()
{
 var choice = document.htmlForm.elementList.selectedIndex;
 var theElement =
 document.createElement(document.htmlForm.elementList.options[choice].text);
 var textNode = document.createTextNode(document.htmlForm.elementText.value);
 var insertSpot = document.getElementById('addHere');

 theElement.appendChild(textNode);
 insertSpot.appendChild(theElement);
}

function addEmptyElement(elementName)
{
 var theBreak = document.createElement(elementName);
 var insertSpot = document.getElementById('addHere');
 insertSpot.appendChild(theBreak);
}

function deleteNode()
{
 var deleteSpot = document.getElementById('addHere');
 if (deleteSpot.hasChildNodes())
  {
   var toDelete = deleteSpot.lastChild;
   deleteSpot.removeChild(toDelete);
  }
}

function showHTML()
{
 var insertSpot = document.getElementById('addHere');
 if (insertSpot.innerHTML)
   alert(insertSpot.innerHTML);
 else
   alert("Not easily performed without innerHTML");
}

//-->>
<</script>>
<</head>>
<<body>>
<<h1 style="text-align: center;">>Simple DOM HTML Editor<</h1>>
<<br />><<br />>
<<div id="addHere" style="background-color: #ffffcc; border: solid;">>
&nbsp;
<</div>>
<<br />><<br />>

<<form id="htmlForm" name="htmlForm" action="#" method="get">>
<<select id="elementList" name="elementList">>
      <<option>>B<</option>>
      <<option>>BIG<</option>>
      <<option>>CITE<</option>>
      <<option>>CODE<</option>>
      <<option>>EM<</option>>
      <<option>>H1<</option>>
      <<option>>H2<</option>>
      <<option>>H3<</option>>
      <<option>>H4<</option>>
      <<option>>H5<</option>>
      <<option>>H6<</option>>
      <<option>>I<</option>>
      <<option>>P<</option>>
      <<option>>U<</option>>
      <<option>>SAMP<</option>>
      <<option>>SMALL<</option>>
      <<option>>STRIKE<</option>>
      <<option>>STRONG<</option>>
      <<option>>SUB<</option>>
      <<option>>SUP<</option>>
      <<option>>TT<</option>>
      <<option>>VAR<</option>>
<</select>>

<<input type="text" name="elementText" id="elementText" value="Default" />>
<<input type="button" value="Add Element" onclick="addElement();" />>

<<br />><<br />>
<<input type="button" value="Insert <<br>>" onclick="addEmptyElement('BR');" />>
<<input type="button" value="Insert <<hr>>" onclick="addEmptyElement('HR');" />>
<<input type="button" value="Delete Element" onclick="deleteNode();" />>
<<input type="button" value="Show HTML" onclick="showHTML();" />>
<</form>>
<</body>>
<</html>>

It would be easy enough to modify the editor displayed in Figure 10-4 to add attributes and apply multiple styles. We’ll leave that as an exercise for readers interested in diving into the DOM.

Figure 10-4: Simple DOM-based HTML editor

Note

Appendix B provides a complete presentation of all (X)HTML elements and properties under DOM Levels 1 and 2. For more information on (X)HTML syntax, see the companion book HTML & XHTML: The Complete Reference, Fourth Edition by Thomas Powell (Osborne/McGraw-Hill, 2003) (www.htmlref.com), or visit the W3 site at www.w3.org/Markup.