CMPS 162: Introduction to Programming

Introduction

The Document Object Model (DOM) in the browser allows JavaScript to make changes to a web page dynamically. This includes the possibility of changing only a part of the page, thereby resulting in much more responsive user interfaces. We will look at traversing parent and child nodes and will see what junk artifacts and node types are. There are more direct ways to target nodes besides traversing children that we will investigate. Another important aspect are node attributes, such as src for an img element that we can retrieve and change. Finally, we will look at adding and inserting nodes into the DOM.

Module Objectives

• Explain the DOM
• Describe parents and children in the DOM
• Show finding children in the DOM
• Describe junk artifacts and nodeType the DOM
• Show more ways to target elements in the DOM
• Explain getting a target’s name in the DOM
• Illustrate counting elements in the DOM
• Explain attributes in the DOM
• Describe attribute names and values in the DOM
• Show adding nodes to the DOM
• Show inserting nodes in the DOM

Learning Resources

• Module 10 Readings: Chapters 58 thru 68 from Myers

Learning Activities

• Module 10 Assignment: Interactive Coding Exercises 58 thru 68

For Further Study

• Read more about the document object model on Wikipedia