DOM Basics | Dreamweaver MX Extensions

The Level 1 DOM introduces the concept of nodes to describe the content on a page. Every element on the page, every object, is an instance of a node. Each page element returns, among its various properties, a nodeType property that tells what kind of node, or object, it is (and, therefore, what kinds of methods and properties it has). There are four node types: document, element, comment, and text. The following sections take a look at each of these in detail.

Document (DOCUMENT_NODE)

This type of node contains the document itself. Therefore, every document has exactly one instance of this node type, and this instance is at the top of the document hierarchy, containing all the other page elements. Table 4.2 and Table 4.3 show the properties and methods of document node objects.

Table 4.2. Properties for DOCUMENT_NODE Objects

Property Name	Return Value	Description/Notes
`nodeType`	`9`	(read only)
`parentNode`	`null`	(read only) The document is at the top of the hierarchy, and therefore has no parent.
`parentWindow`	An object representing the document's parent window	(read only)
`childNodes`	A `NodeList` containing all children (see Table 4.1 for properties of `NodeList` )	(read only) The document usually has only one child, the `<HTML>` tag element.
`documentElement`	The <HTML> tag element	(read only) Using this property is a shorthand method for calling the `<HTML>` tag element.
`body`	The `<BODY>` tag element	Using this property is a shorthand method for calling the `<BODY>` tag element.
URL	The absolute address of the document	Working within Dreamweaver, this will return an address beginning with the `"file://"` protocol. If a document hasn't been saved, it will return an empty string.

Table 4.3. Methods for DOCUMENT_NODE Objects

Method Name	Return Value	Description/Notes
`getElementsByTagName(tagName)`	A `NodeList containing` all instances of a certain HTML tag	This list can be stepped through to access a particular tag instance in the document.
`hasChildNodes()`	`true`	This method always returns a Boolean, and the document always has children; so it will always return `true` .

HTML Elements (ELEMENT_NODE)

All HTML elements in the documentall HTML tags, in other wordsare instances of this node type. The hierarchical nesting structure of HTML tags translates into parentNode/childNode relationships so that a <table> element is the parent of all <tr> elements it contains, and those in turn are parents of all <td> tags they contain. The <html> element itself exists at the top of this hierarchy. The <html> object is the parent of all tags within it and is the child of the document object. Table 4.4 and Table 4.5 show the properties and methods of element node objects.

Table 4.4. Properties for ELEMENT_NODE Objects

Property Name	Return Value	Description/Notes
`nodeType`	`1`	(read only)
`parentNode`	The `parent` tag	(read only) For the `<HTML>` tag object, this property returns the document object.
`childNodes`	A `NodeList` containing all immediate children (see Table 4.1 for properties of `NodeList` )	(read only) Any HTML tag completely contained within the opening and closing tags of the current element will be considered its child; text and comment objects can also be children of HTML elements.
`tagName`	The HTML name for the tag ( `TABLE` , `A` , `IMG` , and so forth)	(read only) This property always returns its value in uppercase.
`attrName`	A string containing the value of the specified tag attribute	This property can't be used if the string it will return is a reserved word, such as `class` .
`innerHTML`	A string consisting of the HTML code contained within the opening and closing tags of the element	(none)
`outerHTML`	A string consisting of the HTML code contained within the tag, and the opening and closing tags	(none)

Table 4.5. Methods for ELEMENT_NODE Objects

Method Name	Return Value	Description/Notes
`getAttribute(attrName)`	The value of the `attrName` attribute	If the element doesn't include the `attrName` attribute, the method returns `null` .
`getTranslatedAttribute` `(attrName)`	The translated value of the `attrName` attribute
`setAttribute(attrName,` `attrValue)`	(none)	Sets the specified attribute to the specified value.
`removeAttribute` `(attrName)`	(none)	Removes the specified attribute.
`getElementsByTagName` `(tagName)`	A `NodeList` of children of the current element that are of the `tagName` specified in the method's parameters	This `NodeList` can be stepped through to access individual members .
`hasChildNodes()`	`true` / `false`
`hasTranslatedAttributes()`	`true` / `false`

HTML Comments (COMMENT_NODE)

Any chunk of text enclosed in comment tags ( <! > ) is an instance of the comment node type. Comments never have children; they are the children of whatever HTML tag they are within. Tables 4.6 and 4.7 show the properties and methods of comment node objects.

Table 4.6. Properties for COMMENT_NODE Objects

Property Name	Return Value	Description/Notes
`nodeType`	`8`	(read only)
`parentNode`	The `parent` tag	(read only)
`childNodes`	An empty `NodeList`	(read only) Comment objects have no children.
`data`	The string of text between the opening and closing comment tags

Table 4.7. Method for COMMENT_NODE Objects

Method Name	Return Value	Description/Notes
`hasChildNodes()`	`false`	Comment objects have no children.

Text Objects (TEXT_NODE)

Any piece of text that is not part of an HTML tag or comment is a text object, an instance of the text node type. Text objects are essentially strings for scripting purposes. A text object never has children; its parent is the HTML tag that encloses it. Table 4.8 and Table 4.9 show the properties and methods of text node objects.

Table 4.8. Properties for TEXT_NODE Objects

Property Name	Return Value	Description/Notes
`nodeType`	`3`	(read only)
`parentNode`	The parent tag	(read only)
`childNodes`	An empty `NodeList` (see Table 4.4.1 for properties of `NodeList` )	(read only) Text objects have no children.
`data`	The string of text that comprises the current text object

Table 4.9. Method for TEXT_NODE Objects

Method Name	Return Value	Description
`hasChildNodes()`	`false`	Text objects have no children.

Nodes and Document Structure

Confused yet? The concepts become clearer after you see them in action, so take a look at them that way. Figure 4.3 shows a fairly simple web page as it might look in Dreamweaver visual editing mode. Figure 4.4 shows a diagrammatic breakdown of the object structure behind this page. You can see that each page element is a parent, child, and/or sibling of another page element, although there is a mixture of node types throughout the hierarchy.

Figure 4.3. A simple HTML document, as seen in Dreamweaver Design view.

graphics/04fig03.gif

Figure 4.4. Diagram of the HTML document shown in Figure 4.3.

graphics/04fig04.gif