Signed in as:
Sign out
Links
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
Cookies
HTML tables
Structuring tables
Scripting w/ tables
Inline frames
Loose ends
Support
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
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
back list forward
Email us if you would like additional information. We would love to see your comments and recommendations for our site.
Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.