12. Document Object Model (DOM): Objects and Collections

Though leaves are many, the root is one.

—William Butler Yeats

Most of us become parents long before we have stopped being children.

—Mignon McLaughlin

Sibling rivalry is inevitable. The only sure way to avoid it is to have one child.

—Nancy Samalin

Objectives

In this chapter you will:

• Use JavaScript and the W3C Document Object Model to create dynamic web pages.

• Learn the concept of DOM nodes and DOM trees.

• Traverse, edit and modify elements in an HTML5 document.

• Change CSS styles dynamically.

• Create JavaScript animations.

Outline

12.1 Introduction

12.2 Modeling a Document: DOM Nodes and Trees

12.3 Traversing and Modifying a DOM Tree

12.4 DOM Collections

12.5 Dynamic Styles

12.6 Using a Timer and Dynamic Styles to Create Animated Effects