11.3 The DOM Core

11.3.1 What is the DOM Core?

Supporting the standard, particularly the W3C DOM, is perhaps the most critical long-term requirement for the next generation of platform- and device-independent Web applications. The DOM has three level specifications and each level consists of different modules and documents:

W3C DOM, level 1 (two documents September 2000):
DOM Level 1 Core
DOM Level 1 HTML
W3C DOM, level 2 (four documents November 2000):
DOM Level 2 Core
DOM Level 2 HTML
DOM Level 2 Events
DOM Level 2 Style
W3C DOM, level 3 (two documents September 2001):
DOM Level 3 Core
DOM Level 3 Events

Most of the documents are well over 100 pages long. At the time of writing, most browsers are still struggling to fully implement levels 1 and 2. These include IE6 and NS6.x. All DOM levels are backward compatible. You can consider level 3 as an extension of level 2 and level 2 an extension of level 1. The DOM HTML document consists of a group of specially designed interfaces dedicated to the HTML, and hence for XHTML, language. Apart from the styles and events, most of the previously discussed DOM functions belong to the DOM HTML. The DOM Style and Events documents laid down the fundamental specifications for programs and scripts to use style (CSS style) and system events.

The DOM Core document provides a crucial set of core properties and methods for reading, writing, and changing the content of documents on any devices and language platforms. The methods of the DOM Core apply equally well to HTML/XHTML and XML. These methods provide a tool not only to manipulate current HTML/XHTML Web contents, but also to set the preparatory work for future XML-based Web contents and applications.

Since the DOM Core is designed for a wide variety of platforms and languages, the structures and interfaces are a little more abstract than those you have encountered thus far. The DOM Core is also a good place to study the tree representation of the document, i.e., the DOM tree.

11.3.2 The node representation of page elements

From the viewpoint of the DOM Core, documents are represented as a hierarchy of node objects (a tree structure) and page elements are represented by nodes. Each node contains both the properties and methods as specialized interfaces. Some types of nodes may have child nodes of various types; other nodes are called leaf nodes and cannot have any child below them in the document structure. Consider the following empty XHTML skeleton:

Listing: ex11-05.txt - An Empty Page

 1: <?xml version="1.0" encoding="iso-8859-1"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5:  <head></head>
 6:  <body>
 7:  </body>
 8: </html>

In terms of the tree notation, this document can be expressed as a tree starting from the document object collection (document node). This collection has three items and each item is a node as follows:

document.item(0).nodeName = !
document.item(1).nodeName = !
document.item(2).nodeName = HTML

The item method returns a node object and the nodeName property is used to access the name of the node. The returned nodeName from the tree structure is not case sensitive. Since most pages start from HTML, you have a special name called documentElement to represent this node, i.e.,

document.documentElement  <html>

The head and body are considered as children of HTML. Starting from <html>, the <head> element is the first child and the <body> element is the last child, i.e.,

document.documentElement.firstChild  <head>
document.documentElement.lastChild  <body>

If you want to print out the words "HEAD" and/or "BODY," the nodeName property is needed. Another useful entity of the DOM tree is the childNodes property. This returns a collection of all nodes under the current node or element. For example, the following statement returns a collection of all nodes or elements of a page under <body>:

document.documentElement.lastChild.childNodes

To see this explanation in action, let's consider the following demonstration example:

Example: ex11-06.htm - Node Representation Of Elements

 1:  <?xml version="1.0" encoding="iso-8859-1"?>
 2:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 3:      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4:  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 5:  <head><title>Node Representation of Elements-ex1106.htm</title></head>
 6:  <body style="background:#000088;font-family:arial;font-size:22pt;
 7:      color:#ffff00;font-weight:bold;text-align:center">
 8:  Node Representation of Elements<br /><br />
 9:  <style>
10:   .butSt{background-color:#dddddd;font-family:arial;font-weight:bold;
11:      font-size:14pt;color:#880000;width:150px;height:35px}
12:  </style>
13:  <div style="color:#ffffff">This is paragraph one</div>
14:  <div style="color:#ffff00">This is paragraph two</div>
15:  <div style="color:#ff0000">This is paragraph three</div>
16:  <div style="color:#00ff00">This is paragraph four</div><br /><br />
17:  <input type="button" value="Element Tree" class="butSt"
18:     onclick="sTree()" />
19:  <div id="outMsg" style="font-size:14pt"></div>
20:  <script>
21:   function sTree()
22:   {
23:   llV = document.documentElement.lastChild.childNodes
24:   llSt = "<br />document.documentElement.lastChild.childNodes <br />"
25:   for (jj=0;jj<llV.length;jj++)
26:   {
27:     llSt = llSt +."item("+jj+").nodeName = "+
28:        llV.item(jj).nodeName+"<br />"
29:   }
30:
31:  document.getElementById("outMsg").innerHTML = llSt
32:  }
33:  </script>
34:  </body>
35:  </html>

Under the <body> element, this page contains the following:

one text;
two line breaks <br />;
one <style>;
four divisions <div>;
one input <input>;
one division <div>;
one script <script>.

When the Element Tree button is clicked in line 17, the sTree() (i.e., show tree) function is activated to collect all elements or nodes inside <body> and to display them one by one. The variable in line 23

llV = document.documentElement.lastChild.childNodes

contains the collection nodeList of all elements under <body>. Therefore, you can use the property llV.length and method llV.item() to gain access to the items of the collection. In particular,

llV.item(jj).nodeName

returns the element name (or node name) of the jjth item in the collection. A for-loop on jj is used to display all items on the screen. Some screen shots are shown in Figs 11.10 and 11.11.

Figure 11.10. ex11-06.htm

graphics/11fig10.jpg

Figure 11.11. Node representation of page elements

graphics/11fig11.jpg

Once the tree is built, the contents of individual elements can be accessed, inserted, deleted, and manipulated. For example, the item number for script <script> is 13, the contents of which are stored in the expression

llV.item(13).text

If you put this statement into line 30 of ex11-06.htm, you will see the content text of the script. Also, from ex11-06.htm, you can see that the script is the last child of the <body> element. This means that the contents of the script can be displayed by the following statement:

document.documentElement.lastChild.lastChild.text

All nodes and tree representations of the page elements are part of the DOM Core specifications from W3C. Since the DOM works by providing object interfaces for applications, one direct learning approach to the DOM Core is to look at some of their interfaces.

Table of Contents

Previous Next