Document Object Model
Download
Report
Transcript Document Object Model
Introduction to the
Document Object Model
DOM
*Understand document structure manipulation
*Dynamic effects in web pages
*Programming, scripting, web content concepts
TAGS to OBJECTS
A document is
read in by a
browser.
Each tag is
converted to an
object.
<html>
<body>
<h1> hello world<h1>
<body>
Browser
The browser builds
an object hierarchy
of the document.
Window
Document
Body
header
<html>
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
Document Reference Problem
<html>
OBJECT
<head>
<title> DOM Example </title>
</head><body>
< Location | Content >
<h1> hello world<h1>
<p> this is an object to
<a href=index.html> click</a>
</p>
</body>
</html>
How to
specify
where?
How to
specify
what?
How to Specify Where?
<html>
1) By name or ID
Example: <p ID=a_name>
<head>
<title> DOM Example </title>
</head><body>
<h1> hello world</h1>
2) Object Hierarchy
<p> this is an object to
html
<phref=index.html>
ID=a_name>
<a
click</a>
</p>
head
body
</body>
</html>
title
h1
p
a
Object Hierarchy Dot Notation
.document
html
head
title
elements
body
h1
p
Collections of specific elements
.all[] .links[] .forms[] …
a
Alternative Location specifications using collections.
For example the <a> tag can be specified by
All[6]
- 6th element in “all” depth first search
Document.links[0] -
use the links collection
DOM a Brief List
.window
.document
.all[] .links[] .forms[] .images[]
.frame
.document
.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?
Special content designations:
innerText, innerHTML
Properties:
bgcolor, color
<p> this is an object to
<a href=index.html> click</a>
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 to
change 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 Model
Tutorials
Tutorials designed to increase your familiarity
with the Document Object Models (DOMs)
used by Netscape and Microsoft web browsers
http://www.csctce.com/demos/dom_tutorial/
http://hotwired.lycos.com/webmonkey/97/32/index1a.html?tw=authoring
http://www.w3schools.com/dhtml/dhtml_events.asp
http://www.brainjar.com/dhtml/intro/default.asp
The DOM is extensively described and used in Chapters
14 to 20 of Deitel “Internet and the World Wide Web
How to Program” also see the first section of Java Script
in Greenlaw
More Events and Properties
Event Handlers:
ONMOUSEMOVE - fires when curser moves
ONMOUSEOVER - Fires when curser moves over an
element
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 is
lowerCamelCased in the DOM JScript.
So in CSS Text-Decoration:underline in DOM
becomes textDecoration=‘underline’