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
    • Understanding the Document Object Model
    • Using window Objects
    • Working with Web Documents
    • Accessing Browser History
    • Working with the location Object
    • Reading Information about the Browser
    • Workshop: Creating Back and Forward Buttons
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • 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

Understanding the Document Object Model

One advantage that JavaScript has over basic HTML is that scripts can manipulate the Web document and its contents. Your script can load a new page into the browser, work with parts of the browser window and document, open new windows, and even modify text within the page dynamically.

To work with the browser and documents, JavaScript uses a hierarchy of parent and child objects called the Document Object Model, or DOM. These objects are organized into a tree-like structure, and represent all of the content and components of a Web document.

Like other objects you've explored, the objects in the DOM have properties, which describe the Web page or document, and methods, which allow you to work with parts of the Web page.

When you refer to an object, you use the parent object name followed by the child object name or names, separated by periods. For example, JavaScript stores objects to represent images in a document as children of the document object. The following refers to the image9 object, a child of the document object, which is a child of the window object:

window.document.image9

The window object is the parent object for all the objects we will be looking at in this hour. Figure 9.1 shows this section of the DOM object hierarchy and a variety of its objects.

Figure 9.1 The JavaScript browser object hierarchy.

History of the DOM

Starting with the introduction of JavaScript 1.0 in Netscape 2.0, JavaScript has included objects to represent parts of a Web document and other browser features. However, there was never a true standard. While both Netscape and Microsoft Internet Explorer included many of the same objects, there was no guarantee that the same objects would work the same way in both browsers, let alone in less common browsers.

The bad news is that there are still differences between the browsers—but here's the good news. Since the release of Netscape 3.0 and Internet Explorer 4.0, all the basic objects (those covered in this hour) are supported in much the same way in both browsers, and new DOM standards are supported by the latest versions of Netscape and Internet Explorer.

While all this standardization doesn't change how the objects described in this hour work, you'll be thankful for it as you move into the advanced features of the DOM later in this book.

DOM Levels

The W3C (World-Wide Web Consortium) has recently developed the DOM level 1 standard. This standard defines not only basic objects, but an entire set of objects that encompass all parts of an HTML document. A level 2 DOM standard is also under development.

The basic object hierarchy described in this hour is informally referred to as DOM level 0, and the objects are included in the DOM level 1 standard. You'll learn how to use the full set of Level 1 DOM objects in Part V of this book.

Share This