Working with DOM Nodes
As you learned in Hour 13, "Using the W3C DOM," the DOM organizes objects within a web page into a tree-like structure. Each node (object) in this tree can be accessed in JavaScript. In the next sections you will learn how you can use the properties and methods of nodes to manage them.
By the Way
The following sections only describe the most important properties and methods of nodes, and those that are supported by current browsers. For a complete list of available properties, see the W3C's DOM specification at http://www.w3.org/TR/DOM-Level-2/.
Basic Node Properties
You have already used the style property of nodes to change their style sheet values. Each node also has a number of basic properties that you can examine or set. These include the following:
nodeName is the name of the node (not the ID). For nodes based on HTML tags, such as <p> or <body>, the name is the tag name: P or BODY. For the document node, the name is a special code: #document. Similarly, text nodes have the name #text. nodeType is an integer describing the node's type: 1 for normal HTML tags, 3 for text nodes, and 9 for the document node. nodeValue is the actual text contained within a text node. This property is not valid for other types of nodes. innerHTML is the HTML content of any node. You can assign a value including HTML tags to this property and change the DOM child objects for a node dynamically.
By the Way
The innerHTML property is not a part of the W3C DOM specification. However, it is supported by the major browsers, and is often the easiest way to change content in a page. You can also accomplish this in a more standard way by deleting and creating nodes, as described later in this hour.
Node Relationship Properties
In addition to the basic properties described previously, each node has a number of properties that describe its relation to other nodes. These include the following:
firstChild is the first child object for a node. For nodes that contain text, such as h1 or p, the text node containing the actual text is the first child. lastChild is the node's last child object. childNodes is an array that includes all of a node's child nodes. You can use a loop with this array to work with all the nodes under a given node. previousSibling is the sibling (node at the same level) previous to the current node. nextSibling is the sibling after the current node.
Watch Out
Remember that, like all JavaScript objects and properties, the node properties and functions described here are case sensitive. Be sure you type them exactly as shown.
Document Methods
The document node itself has several methods you might find useful. You have already used one of these, getElementById(), to refer to DOM objects by their ID properties. The document node's methods include the following:
getElementById(id) returns the element with the specified id attribute. getElementsByTagName(tag) returns an array of all of the elements with a specified tag name. You can use the wildcard * to return an array containing all the nodes in the document. createTextNode(text) creates a new text node containing the specified text, which you can then add to the document. createElement(tag) creates a new HTML element for the specified tag. As with createTextNode, you need to add the element to the document after creating it. You can assign content within the element by changing its child objects or the innerHTML property.
Node Methods
Each node within a page has a number of methods available. Which of these are valid depends on the node's position in the page, and whether it has parent or child nodes. These include the following:
appendChild(new) appends the specified new node after all of the object's existing nodes. insertBefore(new, old) inserts the specified new child node before the specified old child node, which must already exist. replaceChild(new, old) replaces the specified old child node with a new node. removeChild(node) removes a child node from the object's set of children. hasChildNodes() returns a Boolean value of true if the object has one or more child nodes, or false if it has none. cloneNode() creates a copy of an existing node. If a parameter of true is supplied, the copy will also include any child nodes of the original node.
|
Main Menu
|
