Monitor

Lesson 14: Introduction to the DOM - Document Object Model

 

Links

Your home page

Creating Websites home

Beginnings
   Introduction to the Web
   Introducing HTML
   Marking up text
   Setting Up
   FTP and FileZilla
   Links and anchors
   Getting some style

Intermediate topics
   Style sheets
   Testing and debugging
   Lists
   Images and maps
   Audio and video
   Intro to JavaScript
   The DOM and scripting
   Logic and Arrays
   Functions and document.write
   Forms and INPUT
   Other controls
   Misc. topics
   Cookies
   HTML tables
   Structuring tables
   Scripting w/ tables
   Inline frames
   Loose ends

In this lesson we begin exploring the concepts, terms, and techniques, to use the DOM to manipulate web content based on user actions:

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

 


Lesson 14: Introduction to the DOM
part 1: concepts and terms

Click here for the video transcript, js2.pdf

 

Hands on exercise

This exercise is primarily focused on using some of the DOM methods.

First, open your scripts1.html and save it as scripts1a.html.

Add a paragraph with an onclick event handler:

      onclick - add ' yuk' to the text.

Add a paragraph with two event handlers:

      onclick - set the color of the previous paragraph to fuchsia
      ondblclick - set the color back to black.

After you have everything working, add a link to scripts1a.html from your index.html page.

 

 

The video below demonstrates some uses of DOM properties and methods in JavaScript, and introduces the window object and three of its methods.

 


Lesson 14: Introduction to the DOM
part 2: sample code and the window object

Click here for the video transcript, dom2.pdf

 

 

Hands on exercise

This exercise is primarily focused on using some of the DOM methods.

Add code to your scripts1a.html page, a dynamically added element:

Start by adding an id attribute to the <body> start tag: id=owner

Next add a <p> tag with an onclick event handler that will create an <h1> element and add it to the page

The steps are these:

For the content of the new paragraph, use: 'Click to see a compliment about our courses.'

Test that clicking the paragraph adds the new <h1> element.

What happens if you click the paragraph more than once? (We'll fix any problems later.)

 

Supplemental materials

    A cumulative summary of the contents of the course so far: Click here to download the cumulative technical summary pdf file

 

 Lesson navigation 

 

 

Email us if you would like additional information. We would love to see your comments and recommendations for our site.