- Refresher on the Different Types of Scripting
- Displaying Random Content on the Client Side
- Understanding the Document Object Model
- Using window Objects
- Working with the document Object
- Accessing Browser History
- Working with the location Object
- More About the DOM Structure
- Working with DOM Nodes
- Creating Positionable Elements (Layers)
- Hiding and Showing Objects
- Modifying Text Within a Page
- Adding Text to a Page
- Changing Images Based on User Interaction
- Thinking Ahead to Developing HTML5 Applications
- Summary
- Q & A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with DOM Nodes
As you’ve seen, 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.
Basic Node Properties
Previously in this book, you used the style property of nodes to change their presentation. 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 a node based on an HTML tag, 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. This is a read-only value.
nodeType is an integer describing the node’s type, such as 1 for normal HTML tags, 3 for text nodes, and 9 for the document node. This is a read-only value.
nodeValue is the actual text contained within a text node. This property returns null for other types of nodes.
innerHTML is the HTML content of any node. You can assign a value, including the HTML tags that provide a rich display, to this property and change the DOM child objects for a node dynamically.
innerText is the text-only content of any node. You can assign a value to this property and change the DOM child objects for a node dynamically.
Node Relationship Properties
In addition to the basic properties described previously, each node has various properties that describe its relation to other nodes. These include the following read-only properties:
parentNode is the primary node of an element; for example, in a list the parentNode would be <ul> or <ol> while the childNodes would include an array of <li> elements.
firstChild is the first child object for a node. For nodes that contain text, such as h1 and 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.
Document Methods
The document node itself has several methods you might find useful. 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 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 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.