• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

DOM Basics

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 document—all HTML tags, in other words—are 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.


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


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint