- 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
Understanding the Document Object Model
One advantage that JavaScript has over plain HTML is that these client-side scripts can manipulate the web browser and documents (including their contents) right there in the browser after the content has been loaded. Your script can load a new page into the browser, work with parts of the browser window and the loaded document, open new windows, and even modify text within the page—all dynamically, without requiring additional page loads from a server.
To work with the browser and documents, JavaScript uses the hierarchy of parent and child objects found within the DOM. These objects are organized into a tree-like structure, and they represent all the content and components of a web document and the browser that renders it.
The objects in the DOM have properties that describe the web browser or document, and methods, or built-in code that enables you to work with parts of the web browser or document. You’ll learn more about these properties and methods, and will practice referencing or using them, as this chapter moves forward.
You’ve seen DOM object notation already in this book, even if it wasn’t called out as such. When you refer to a DOM object, you use the parent object name followed by the child object name or names, separated by periods. For example, if you need to refer to a specific image loaded in your web browser, this is a child object of the document object. But that document object, in turn, is a child of the DOM’s window object. So to reference an image called logo_image, the DOM object notation would look like this:
window.document.logo_image