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
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/
W3Schools information and tutorials – https://www.w3schools.com/
Everything you ever wanted to know about the DOM is at https://developer.mozilla.org/en-US/docs/DOM