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
Comments (0)
You don't have permission to comment on this page.