| 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.  Figure 4.4. Diagram of the HTML document shown in Figure 4.3.   |
