Sams Teach Yourself JavaScript in 24 Hours
- Table of Contents
- Copyright
- About the Author
- Acknowledgments
- We Want to Hear from You!
- Reader Services
- Introduction
- Part I: Getting Started
- Hour 1. Understanding JavaScript
- Hour 2. Creating a Simple Script
- Hour 3. How JavaScript Programs Work
- Part II: Learning JavaScript Basics
- Hour 4. Using Functions and Variables
- Hour 5. Using Strings and Arrays
- Hour 6. Testing and Comparing Values
- Hour 7. Repeating Yourself: Using Loops
- Hour 8. Using Math and Date Functions
- Part III: The Document Object Model (DOM)
- Hour 9. Working with the Document Object Model
- Hour 10. Responding to Events
- Hour 11. Using Windows and Frames
- Hour 12. Getting Data with Forms
- Hour 13. Using Graphics and Animation
- Part IV: Moving on to Advanced JavaScript Features
- Hour 14. Creating Cross-Browser Scripts
- Hour 15. Creating Custom Objects
- Hour 16. Working with Sounds and Plug-Ins
- Hour 17. Debugging JavaScript Applications
- Part V: Working with Dynamic HTML (DHTML)
- Hour 18. Working with Style Sheets
- Hour 19. Using Dynamic HTML (DHTML)
- Hour 20. Using Advanced DOM Features
- Part VI: Putting It All Together
- Hour 21. Improving a Web Page with JavaScript
- Hour 22. Creating a JavaScript Game
- Hour 23. Creating DHTML Applications
- Hour 24. JavaScript Tips and Tricks
- Part VII: Appendices
- Appendix A. Other JavaScript Resources
- Appendix B. Tools for JavaScript Developers
- Appendix C. Glossary
- Appendix D. JavaScript Quick Reference
- Appendix E. DOM Quick Reference
Working with DOM Nodes
As you learned in Hour 19, "Using Dynamic HTML (DHTML)," 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
You have already used the style property of nodes to change their stylesheet 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.
- 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.
Node Relationship Properties
In addition to the basic properties described above, 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.
Document Methods
The document node itself has several methods you may 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( old ) 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.
Hiding and Showing Objects | Next Section
Account Sign In
View your cart