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

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Lecture - The Document Object Model

This version was saved 8 years, 7 months ago View current version     Page history
Saved by Dr. Ron Eaglin
on August 21, 2015 at 9:37:42 am
 

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.

 

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.