JavaScript Editor Free JavaScript Editor     JavaScript Debugger 




Main Page

Previous Page
Next Page

15.2. Document

Alright, now we are officially dealing with the HTML Document Object Model in all its hierarchical glory. The only question is, what does the word hierarchical mean in reference to the HTML DOM?

To me, it means that I envision the structure as a tree, but not the binary kind or the kind growing outside. It has a single root and branches (elements), and sometimes those branches have branches (more elements). In my mind, the only difference from the growing kind of tree is that the root is at the top, but since I'm in Pennsylvania, I think of trees in China and everything is alright. If you happen to be in China, just envision trees in Pennsylvania, and you'll be fine. Ex-mainframe programmers should think IMS DB to get themselves through this section.

Seriously, as weird as it sounds, the concept of hierarchical data has been around for a long time. Consider the HTML document shown in Listing 15-1 for a moment.

Listing 15-1. An HTML Document

<html>
   <head>
     <title>Test</title>
     <script language="JavaScript"></script>
   </head>
   <body>
     <h1>Test 1</h1>
     <h2>Test 2</h2>
     <h3>Test 3</h3>
   </body>
</html>

This document could alternatively be depicted graphically as shown in Figure 15-1.

Figure 15-1. Graphic depiction of HTML document in Listing 15-1


See, it's hierarchical. There is a single root, the html element, which has two children, the head and body elements. The head and body elements are siblings because they both share the same parent. The head element has two children, and the title and script elements and the body element have three children: the h1, h2, and h3 elements. The title and script elements are siblings, and the H1, H2, and H3 elements are siblings, but the two groups of elements are not siblings because they have different parents.

So far, this has pretty much been an intellectual exercise, so how excited can someone get about a picture? Um, I mean, a picture that doesn't come with a rating!

What I mean is, maybe it would help if there were a convenient table that covered the various properties and methods available through the document interface. Fortunately, Igor has put together Table 15-2 to give you some idea of what is available.

Table 15-2. HTML DOM Properties/Methods

Property/Method

Description

anchors

A collection consisting of the anchors in the current document.

applets

A collection consisting of the applets in the current document.

attributes

A collection consisting of the attributes for the current node.

body

The body element of the page.

childNodes

A nodeset consisting of the child nodes of the current node. Please note that the nodeset can be empty.

cookie

A collection consisting of the cookies associated with the current document.

doctype

The Document Type Declaration associated with this XML document.

documentElement

The document's root element.

domain

The server's domain name.

firstChild

The first child node of the current node.

forms

A collection consisting of the forms in the current document.

frames

A collection consisting of the frames in the current document.

images

A collection consisting of the images in the current document.

implementation

The DOMImplementation for this document.

lastChild

The last child of the current node.

links

A collection consisting of the links in the current document.

nextSibling

The next child of the current node's parent.

nodeName

The name of the node.

nodeType

The type of the node.

nodeValue

The value of the node.

ownerDocument

The Document associated with the current element.

parentNode

The parent of the current node.

previousSibling

The previous child of the current node's parent.

referrer

The URI of the page that linked to this page.

title

The title of the HTML document.

URL

The current page's URL.

appendChild(new)

Appends the new child node as the last child.

cloneNode(deep)

Duplicates the specified node. The Boolean parameter deep is used to indicate a deep copy, whether or not the children should be copied.

close()

Closes the document stream and also causes the document to be rendered.

createAttribute(name)

Creates an attribute.

createCDATASection(data)

Creates a CDATASection node using the data provided.

createComment(data)

Creates a comment node using the data provided.

createDocumentFragment()

Creates an empty document fragment.

createElement(tagName)

Creates the specified element.

createEntityReference(name)

Creates an EntityReference.

createProcessingInstruction (target,data)

Creates a ProcessingInstruction node.

createTextNode(data)

Creates a Text element using the data provided.

getElementById(elementId)

Returns a single element based upon that element's id attribute. When there is more than one element with the same id, only the first is returned.

getElementByName(elementName)

Returns a collection of elements based upon the element's name.

getElementsByTagName(tagname)

Returns a nodeset consisting of elements with matching tag names.

hasChildNodes()

Returns TRue if child nodes exist and false if child nodes do not exist.

insertBefore(new,reference)

Inserts the new child node before the reference child node.

open()

Opens the document stream for writing.

removeChild(old)

Removes the old child node.

replaceChild(new, old)

Replaces the old child node with the new child node.

write()

Writes a text string to the document.

writeln()

Writes a text string to the document and appends a newline character.


Before moving on, I want to remind you that the document is hierarchical. This means that each element has properties and methods of its own. Rather than go crazy trying to create some kind of uber table with every possible property and method for the interfaces shown in Table 15-1, I decided to create Table 15-3. Table 15-3 covers the properties and methods common to the various elements.

Table 15-3. Properties/Methods Common to the Various HTML DOM Interfaces

Property/Method

Description

attributes

A collection consisting of the attributes for the current node.

childNodes

A nodeset consisting of the child nodes of the current node. Please note that the nodeset can be empty.

className

The element's class attribute.

dir

The element's text direction.

firstChild

The first child node of the current node.

id

The element's identifier.

lang

The element's language code.

lastChild

The last child of the current node.

nextSibling

The next child of the current node's parent.

nodeName

The name of the node.

nodeType

The type of the node. See Table 15-2 for accepted values.

nodeValue

The value of the node.

ownerDocument

The document associated with the current element.

parentNode

The parent of the current node.

previousSibling

The previous child of the current node's parent.

tagName

The tag name of the element.

title

The element's title.

appendChild(new)

Appends the new child node as the last child.

cloneNode(deep)

Duplicates the specified node. The Boolean parameter deep is used to indicate a deep copy, whether or not the children should be copied.

getAttribute(name)

Returns the value of an attribute based upon name.

getAttributeNode(name)

Retrieves an Attr node by name.

getElementsByTagName(tagname)

Returns a nodeset consisting of elements with matching tag names.

hasChildNodes()

Returns true if child nodes exist and false if child nodes do not exist.

insertBefore(new,reference)

Inserts the new child node before the reference child node.

normalize()

Normalizes the specified element and children of the specified element.

removeAttribute(name)

Removes an attribute by name.

removeAttributeNode(name)

Removes an Attr node by name.

removeChild(old)

Removes the old child node.

replaceChild(new,old)

Replaces the old child node with the new child node.

setAttribute(name,value)

Creates an attribute and sets its value.

setAttributeNode(name)

Adds an Attr node by name.


I want to add a little hint on how to find some of the remaining properties or methods for the various interfaces. Basically, it goes like this: If it is a property or method of the element, there is a really good chance that it is also a property or method of the interface. It might sound strange that this has to be mentioned, but I've found that everyone has a blind spot concerning something in their career. In case you were wondering, mine is peasants with pitchforks and torches.


Previous Page
Next Page

R7


JavaScript Editor Free JavaScript Editor     JavaScript Debugger


©