Introduction to theDocument Object ModelDOM
*Understand document structure manipulation
*Dynamic effects in web pages
*Programming, scripting, web content concepts
TAGS to OBJECTS
A document isread in by abrowser.
The browser buildsan object hierarchyof the document.
Each tag isconverted to anobject.
Objects are memory structures which have
-properties =data values
-methods = code the object can execute
-event/handlers= respond to something done to the object
-address = a means of identifying the object in the document
<html>
<body>
<h1> hello world<h1>
<body>
<html>
Browser
Window
Document
Body
header
Document Reference Problem
<html>
<head>
<title> DOM Example </title>
</head><body>
<h1> hello world<h1>
<p> this is an object to
<a href=index.html> click</a>
</p>
</body>
</html>
OBJECT
< Location | Content >
How tospecifywhat?
How tospecifywhere?
How to Specify Where?
<html>
<head>
<title> DOM Example </title>
</head><body>
<h1> hello world</h1>
<p> this is an object to
<a href=index.html> click</a>
</p>
</body>
</html>
1) By name or ID
Example: <p ID=a_name>
<p ID=a_name>
2) Object Hierarchy
html
head
body
title
h1
p
a
Object Hierarchy Dot Notation
html
head
body
title
h1
p
a
.document
elements
Collections of specific elements
.all[] .links[] .forms[] …
All[6] - 6th element in “all” depth first search
Document.links[0] - use the links collection
Alternative Location specifications using collections.For example the <a> tag can be specified by
DOM a Brief List
.window
.document
.forms[]
.images[]
.links[]
.frame
.document
.all[]
.elements
Document:
Method -.write()
Properties - .bgColor
Elements:
handler – onSubmit()
Properties - .value
.all[] refers to any tag , addresses by [occurrence number] or “ID”
Properties- any style handler - onClick
How to Specify What?
<p> this is an object to
<a href=index.html> click</a>
Special content designations:
innerText, innerHTML
Properties:
bgcolor, color
Events:
onclick
DOMExample.html
<html>
<head><title>DOM Example</title></head>
<body>
<h1> hello world</h1>
<h1 id= "line2" onclick="style.color='red'">Click on this text tochange the color</h1>
<h1 onclick="window.document.bgColor='blue'">
Click on this to change the background color</h1>
<h1 onclick="window.document.all[4].style.color='green'">
Click on this to make hello world green</h1>
<h1 onclick="line2.style.color='green'">
Click on this to make line2 green</h1>
</body>
</html>
Document Object ModelTutorials
http://www.brainjar.com/dhtml/intro/default.asp
Tutorials designed to increase your familiaritywith the Document Object Models (DOMs)used by Netscape and Microsoft web browsers
The DOM is extensively described and used in Chapters14 to 20 of Deitel “Internet and the World Wide WebHow to Program” also see the first section of Java Scriptin Greenlaw
More Events and Properties
Event Handlers:
ONMOUSEMOVE - fires when curser moves
ONMOUSEOVER - Fires when curser moves over anelement
ONMOUSEOUT - Fires when curser leaves an object
ONKEYDOWN - Fires when the user pushes a key
ONCLICK – Fires when object is clicked
Style Properties:
In general if a style is dashed in CSS it islowerCamelCased in the DOM JScript.
So in CSS Text-Decoration:underline in DOMbecomes textDecoration=‘underline’