| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Want to organize your cloud files? Sign up for a free webinar to see how Dokkio (a new product from PBworks) can help you find, organize, and collaborate on your Drive, Gmail, Dropbox, and Slack files: Weds, May 27 at 2PM Eastern / 11AM Pacific
View
 

Lecture - The Document Object Model

Page history last edited by Dr. Ron Eaglin 4 years, 9 months ago

The Document Object Model

 

Prerequisites

 

Lecture - Getting Started in HTML  and Lecture - Getting Started with CSS

 

Summary

 

Students in COP4813 and doing web programming should have an understanding of the structure of web pages and how to access elements in a web page. This requires an understanding of the Document Object Model (DOM) and this provides the basis for interactivity with web pages. The DOM is the structure of all web pages and defines how everything on the page is accessed.

 

Topics covered:

1. Document Object Model for HTML pages

2. Using Javascript to show and change the structure of a web page

 

 

Video 

 

 

http://online1.daytonastate.edu/player2.php?id=e6af401c28c1790eaef7d55c92ab6ab6 

 

Reference Materials

<!DOCTYPE html>
<html>
  <head>
    <title>Hello HTML</title>
    <link rel="stylesheet" type="text/css" href="/styles.css">
<script>
  function reducePicture()
 {
   var height = document.getElementById("picture").height;
   var width = document.getElementById("picture").width;
   document.getElementById("picture").height = height / 2;
   document.getElementById("picture").width = width / 2;
 }
</script>
  </head>
  <body>
    <p class="mystyle">Hello World!</p>
    <a href="https://cop4813eaglin.pbworks.com/w/page/57579829/Lecture%20-%20Getting%20Started
%20in%20HTML">Link to Web Site</a><br/>
    <button onclick="reducePicture()">Reduce Size</button><br/>
    <img id="picture" src="Eaglin.jpg"><br/>
  </body>
</html> 

 

 

Additional Information

 

Full information about the DOM is available at the W3C - http://www.w3.org/DOM/ 

You can learn more about the DOM at W3Schools and do tutorials - http://www.w3schools.com/dom/default.asp 

Everything you ever wanted to know about the DOM is at https://developer.mozilla.org/en-US/docs/DOM 

 

COP 4813 Lectures

Comments (0)

You don't have permission to comment on this page.