The Document Object Model

Functions

• What is a function?
• Pre-defined functions
• Scope of Variables
• Function Expressions
• Anonymous Functions
• Callback Functions

Objects

• What is an object?
• Accessing Object Properties
• Calling an Object’s Methods
• Altering Properties/Methods

Array Properties and Methods

• The length property
• Stack Methods
• Queue Methods
• Reordering Methods
• Manipulation Methods
• Location Methods
• Iterative Methods
• Working with array of objects

DOM

• The Document Object Model
• Node Relationships
• Working with the Contents of Elements
• Getting Elements by ID, Tag Name, or Class
• Adding and removing element

Built-in Objects

• Object Types
• The String Object
• The Window Object

Using Events in JavaScript

• What are events?
• Handling events
• DOM manipulation using events

Handling Input and Output

• Understanding HTML Forms
• Working with the Form Object
• Validating user input

Ajax and JSON

• Introduction to AJAX and JSON
• Viewing AJAX in action
• Using the XMLHttpRequest object
• Putting Objects in Motion with JSON

The Document Object Model or DOM is the representation of the objects that make up the structure of a document on the web. The Document Object Model is an application programming interface (API) for manipulating HTML documents.

Understanding the DOM is the key to being able to manipulate the text or HTML in a web page. Using the DOM, you can create animations, update data without refreshing web pages, move objects around in a browser, and much more.

The Document Object Model is the interface for JavaScript to talk to and work with HTML documents inside of browser windows. When a web page is loaded, the browser creates a Document Object Model of the page. The DOM represents an HTML document as a hierarchy of nodes. The DOM can be visualized as an inverted tree, with each part of the HTML document branching off of its containing part.

A DOM tree is made up of individual components, called nodes. The main node, from which every other node springs, is called the document node. The node under the document node is the root element node. For HTML documents, the root node is HTML. After the root node, every element, attribute, and a piece of content in the document is represented by a node in the tree that comes from another node in the tree.

The DOM has several different types of nodes:

• Document node: The entire HTML document is represented in this node
• Element nodes: The HTML elements
• Attribute nodes: The Attributes associated with elements
• Text nodes: The text content of elements
• Comment nodes: The HTML comments in a document

Listing 10-1 is the markup for a web page. The DOM representation is shown in the next figure