Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

• 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
    • DOM Level 0
    • DOM Level 1

DOM Level 1

The Level 1 DOM is the first cross-browser DOM standardized by the W3C. Its objects are stored under the document object of the Level 0 DOM.

Basic Node Properties

Each object has certain common properties:

• nodeName is the name of the node (not the ID). The name is the tag name for HTML tag nodes, #document for the document node, and #text for text nodes.
• nodeType is a number describing the node's type: 1 for HTML tags, 3 for text nodes, and 9 for the document.
• nodeValue is the text contained within a text node.
• innerHTML is the HTML contents of a container node.
• id is the value of the ID attribute for the node.
• classname is the value of the class attribute for the node.

Relationship Properties

The following properties describe an object's relationship with others in the hierarchy:

• firstChild is the first child node for the current node.
• lastChild is the last child object for the current node.
• childNodes is an array of all of the child nodes under a node.
• previousSibling is the sibling before the current node.
• nextSibling is the sibling after the current node.
• parentNode is the object that contains the current node.

Offset Properties

While not part of the W3C DOM, both Netscape and Internet Explorer support the following properties that provide information about a node's position:

• offsetLeft is the distance from the left-hand side of the browser window or containing object to the left edge of the node object.
• offsetTop is the distance from the top of the browser window or containing object to the top of the node object.
• offsetHeight is the height of the node object.
• offsetWidth is the width of the node object.

Style Properties

The style child object under each DOM object includes its style sheet properties. These are based on attributes of a style attribute, <style> tag, or external style sheet. See Hour 18, "Working with Style Sheets," for details on these properties.

Node Methods

The following methods are available for all DOM nodes:

• appendChild(node) adds a new child node to the node after all of its existing children.
• insertBefore(node,oldnode) inserts a new node before the specified existing child node.
• replaceChild(node,oldnode) replaces the specified old child node with a new node.
• removeChild(node) removes an existing child node.
• hasChildNodes() returns a Boolean value of true if the node has one or more children, or false if it has none.
• cloneNode() returns a copy of the current node.
• getAttribute( attribute_name) gets the value of the attribute you specify and stores it in a variable.
• setAttribute( attribute _ name , value ) sets the value of an attribute.
• removeAttribute( attribute_name) removes the attribute you specify.
• hasAttributes() simply returns true if the node has attributes, and false if it has none.

Document object methods and properties

The following are methods and properties of the document object:

• document.getElementById( ID ) returns the element with the specified ID attribute.
• document.getElementsByTagName( tag ) returns an array of the elements with the specified tag name. You can use the asterisk (*) as a wildcard to return an array containing all of the nodes in the document.
• document.createElement( tag ) creates a new element with the specified tag name.
• document.createTextNode( text ) creates a new text node containing the specified text.
• document.documentElement is an object that represents the document itself, and can be used to find information about the document.

Share This