DOM

Overview

The Document Object Model (DOM) is an API

that allows programs to interact with HTML (or
XML) documents
 In typical browsers, the JavaScript version of the API is
provided via the document host object
 W3C recommendations define standard DOM
Several other browser host objects are informal,
de facto standards
alert, prompt are examples

2
 DOM Introduction

Example: “Rollover” effect

Cursor not over image Image changes when cursor
moves over

3
DOM Introduction

4
DOM Introduction

Import
JavaScript
code

5
 DOM Introduction

Default language for scripts specified as attribute values

6
DOM Introduction

Calls to JavaScript
show() function when
mouse moves over/away
from image

7
 DOM Introduction

Notice that id of image is first argument to show()

8
DOM Introduction

9
DOM Introduction

DOM method returning Object

10
DOM Introduction

Returns instance
of Element
(DOM-defined
host object)
representing
HTML element
with given id

11
 DOM Introduction

Some properties of
Element instance
correspond
to attributes of
HTML element

12
 DOM Introduction

Method inherited by Element instances

for setting value of an attribute

13
DOM Introduction

Effect: src attribute of HTML element with

specified eltId is changed to specified URL

14
DOM Introduction

Image src changed to

CFP22.png when mouse
is over image,
CFP2.png when leaves

15
 DOM History and Levels

Very simple DOM was part of Netscape 2.0

Starting with Netscape 4.0 and IE 4.0,
browser DOM API’s diverged significantly
W3C responded quickly with DOM Level 1
(Oct 1998) and subsequently DOM Level 2
We cover JavaScript API for DOM2 + some
coverage of browser specifics

16
 Intrinsic Event Handling

An event is an occurrence of something

potentially interesting to a script:
 Ex: mouseover and mouseout events
An HTML intrinsic event attribute is used
to specify a script to be called when an event
occurs
 Ex: onmouseover
 Name of attribute is on followed by event name

17
Intrinsic Event Handling

18
Intrinsic Event Handling

19
Intrinsic Event Handling

20
 Intrinsic Event Handling

Intrinsic event attribute value is a script;

what language is it written in?
HTTP Content-Script-Type header field
specifies default scripting language
meta element allows document to specify
values as if they were header fields
Header field name Header field value

21
 Modifying Element Style

Change
background color
of element
containing cursor

22
Modifying Element Style

23
Modifying Element Style
Like rollover, style needs to be modified
both when entering and exiting the element.

24
Modifying Element Style
Reference to Element instance
representing the td element

25
Modifying Element Style

26
Modifying Element Style
Reference to Element instance

27
Modifying Element Style

All Element instances have a style property

with an Object value

28
Modifying Element Style

Properties of style object

correspond to CSS style properties of
the corresponding HTML element.

29
 Modifying Element Style

Rules for forming style property names from

names of CSS style properties:
 If the CSS property name contains no hyphens, then
the style object’s property name is the same
 Ex: color color
 Otherwise, all hyphens are removed and the letters
that immediately followed hyphens are capitalized
 Ex: background-color backgroundColor

30
 Modifying Element Style

Net effect: “silver” becomes the specified value for

CSS background-color property of td element;
browser immediately modifies the window.

31
 Modifying Element Style

Alternative syntax (not supported in IE6):

32
 Modifying Element Style

Alternate syntax (not supported in IE6):

Every DOM2-compliant style object

has a setProperty() method

33
 Modifying Element Style

Alternate syntax (not supported in IE6):

CSS property
value

CSS property Empty string

name or
(unmodified) “important”

34
 Modifying Element Style

Advantages of setProperty() syntax:

 Makes it clear that a CSS property is being set
rather than merely a property of the style
object
 Allows CSS property names to be used as-is
rather than requiring modification (which can
potentially cause confusion)

35
 Modifying Element Style

Obtaining specified CSS property value:

Alternate DOM2 syntax (not supported by

IE6):

36
 Document Tree

Recall that HTML document elements form

a tree structure, e.g.,

DOM allows scripts to access and modify

the document tree

37
 Document Tree: Node

There are many types of nodes in the DOM

document tree, representing elements, text,
comments, the document type declaration, etc.
Every Object in the DOM document tree
has properties and methods defined by the
Node host object

38
Document Tree: Node

39
Document Tree: Node

40
Document Tree: Node

41
Document Tree: Node
Example HTML document

Function we will write that will

use Node methods and properties
to produce string representing
Element tree

42
 Document Tree: Node

String produced by TreeOutline():

43
 Document Tree: Node

Example: “walking” the tree of an HTML

document
 Reference to html element is contained in
documentElement property of document
object
 Use Node-defined methods to recursively create
an outline of nodeName’s:
Depth in tree

44
Document Tree: Node

45
 Document Tree: Node

Contains nodeType value representing Element

46
Document Tree: Node

Ignore non-Element’s

47
Document Tree: Node

Add nodeName to string

48
 Document Tree: Node

Recurse on
child nodes

49
 Document Tree: Node

For Element’s, nodeName is type of the

element (p, img, etc.)
Case: Name will be lower case if browser
recognizes document as XHTML, upper case
otherwise
 Can guarantee case by using String instance
toLowerCase() / toUpperCase()
methods

50
 Document Tree: Node

Convention: write code as if browser is

DOM-compliant, work around non-
compliance as needed

In a DOM-compliant browser, we would use

this symbolic constant rather than the constant 1.
Problem: IE6 does not define ELEMENT_NODE
property (or Node object).
Solution: Use symbolic constant if available,
fall back to numeric constant if necessary.

51
 Document Tree: Node

Convention: write code as if browser is

DOM-compliant, work around non-
compliance as needed

This expression is automatically cast to Boolean.

IE6: no Node global, so evaluates to false
DOM-compliant: Node is an Object, so evaluates
to true

52
Document Tree: Modification
Initial rendering After user clicks first list item

53
 Document Tree: Modification

Find the
li Element
following the
selected one
(if it exists)

54
Document Tree: Modification

Returns null if
no next sibling

55
 Document Tree: Modification

Converting
null to Boolean
produces false

56
 Document Tree: Modification

Swap nodes
if an li
element
follows

57
Document Tree: Modification

Operate on a node by calling methods

on its parent

58
Document Tree: Modification

Remove following element from tree

Re-insert element earlier in tree

59
 Document Tree: document

The document object is also considered a

Node object
Technically, document is the root Node
of the DOM tree
 html Element object is a child of document
 Other children may also include document type
declaration, comments, text elements (white
space)

60
Document Tree: document

61
Document Tree: document

62
Document Tree: Element Nodes

63
 Document Tree: Text Nodes

data property represents character data of a

Text node
 Modifying the property modifies the corresponding text
in the browser
By default, the DOM tree may contain sibling
Text nodes
 Example: © 2007 might be split into two
Text nodes, one with copyright character
 Call normalize() method on an ancestor node to
prevent this

64
 Document Tree: Adding Nodes
<body onload="makeCollapsible('collapse1');">
<ol id="collapse1">
<li>First element of ordered list.</li>
<li>Second element.</li>
<li>Third element.</li>
</ol>
<p>
Paragraph following the list (does not collapse).
</p>
</body>
Body of original HTML document:

65
 Document Tree: Adding Nodes
<body onload="makeCollapsible('collapse1');">

Added
to DOM
tree:

<ol id="collapse1">
<li>First element of ordered list.</li>
<li>Second element.</li>
<li>Third element.</li>
</ol>
<p>
Paragraph following the list (does not collapse).
</p>
</body> Effect of executing makeCollapsible():

66
 Document Tree: Adding Nodes

Added element
is displayed as if
it was part of
the HTML source
document

67
Document Tree: Adding Nodes

68
Document Tree: Adding Nodes

Node
creation

69
Document Tree: Adding Nodes

Node
addition to DOM
tree (rec. doing
this immediately
after creation).

70
Document Tree: Adding Nodes

Attribute
addition

71
 Document Tree: Adding Nodes

Before clicking button: After clicking button:

72
Document Tree: Adding Nodes

73
Document Tree: Adding Nodes

Modifying text.

74
 Document Tree: HTML Properties

Attribute values can be set two ways:

As with CSS properties, former has some

advantages:
 Makes clear that setting an HTML attribute, not
merely a property of an object
 Avoids certain special cases, e.g.
element.setAttribute(“class”, “warning”); //DOM
element.className = “warning”; //req’d in IE6
class is reserved word in JavaScript

75
 DOM Event Handling

Note: IE6 has a different event model

Event instance created for each event
Event instance properties:

type: name of event (click, mouseover, etc.)
 target: Node corresponding to document
element that generated the event (e.g., button
element for click, img for mouseover). This is
the event target.

76
 DOM Event Handling

JavaScript event listener: function that is

called with Event instance when a certain
event occurs
An event listener is associated with a target
element by calling addEventListener()
on the element

77
DOM Event Handling

78
 DOM Event Handling

Event
target

79
DOM Event Handling

Event type

80
 DOM Event Handling

DOM event types:

 All HTML intrinsic events except keypress,
keydown, keyup, and dblclick
 Also has some others that are typically targeted
at the window object:

81
 DOM Event Handling

Event handler

Definition
of event
handler

82
DOM Event Handling

Event instance

83
DOM Event Handling

Normally false
(more later)

84
DOM Event Handling

85
 DOM Event Handling:
Mouse Events
DOM2 mouse events
 click
 mousedown
 mouseup
 mousemove
 mouseover
 mouseout
Event instances have additional properties for
mouse events

86
DOM Event Handling:
Mouse Events

87
 DOM Event Handling:
Mouse Events
Example: mouse “trail”

88
 DOM Event Handling:
Mouse Events
HTML document:

JavaScript init() function:

Create
“blips” String uniquely
identifying this div

Add event
listener

89
 DOM Event Handling:
Mouse Events
Style sheet for “blips”:

Initially, not displayed

90
 DOM Event Handling:
Mouse Events
Event handler updateDivs():

Convert mouse location

from Number to String
and append units

91
 DOM Event Handling:
Mouse Events
Event handler updateDivs():

Mod (remainder) operator

used to cycle through “blip” divs
(least-recently changed is the
next div moved)

92
 DOM Event Propagation

Target of event is lowest-level element

associated with event
 Ex: target is the a element if the link is clicked:
<td><a href=…>click</a></td>
However, event listeners associated with
ancestors of the target may also be called

93
 DOM Event Propagation

Three types of event listeners:

94
 DOM Event Propagation

Three types of event listeners:

Capturing: Listener on ancestor created with true as third arg.

95
 DOM Event Propagation

Three types of event listeners:

Target: Listener on target element

96
 DOM Event Propagation

Three types of event listeners:

Bubbling: Listener on ancestor created with false as third arg.

97
 DOM Event Propagation

Priority of event handlers:

1. Capturing event body

handlers; ancestors ol
closest to root li Target
have highest a
priority

98
 DOM Event Propagation

Priority of event handlers:

body
ol
li
a
2. Target event handlers

99
 DOM Event Propagation

Priority of event handlers:

body 3. Bubbling event

ol handlers; ancestors
li closest to target have
a priority.

100
 DOM Event Propagation

Certain events do not bubble, e.g.,

 load
 unload
 focus
 blur

101
 DOM Event Propagation

Propagation-related properties of Event

instances:
 eventPhase: represents event processing phase:
 1: capturing
 2: target

 3: bubbling

 currentTarget: object (ancestor or target)

associated with this event handler

102
 DOM Event Propagation

Propagation-related method of Event instances:

 stopPropagation(): lower priority event
handlers will not be called
Typical design:
 Use bubbling event handlers to provide default
processing (may be stopped)
 Use capturing event handlers to provide required
processing (e.g., cursor trail)

103
 Example: Drop-down Menus

When cursor
moves over
upper menu
…

104
 Example: Drop-down Menus

…
a drop-down
appears

105
Example: Drop-down Menus

Background color changes

as cursor moves over
drop-down items

106
 Example: Drop-down Menus

Drop-down
disappears
when cursor
leaves both
drop-down
and menu

107
 Example: Drop-down Menus

Document structure:

108
 Example: Drop-down Menus

Document structure: Event handlers will be added by

JavaScript code

109
 Example: Drop-down Menus

Document structure:

Top menu
is a table

110
 Example: Drop-down Menus

Document structure:

CSS:

Each top
menu item is
a (positioned)
div

111
 Example: Drop-down Menus

Document structure:

CSS:

Associated
drop-down is
in a div
that is
out of the normal
flow and initially
invisible

112
 Example: Drop-down Menus

Document structure:

Associated
drop-down is
a table

113
 Example: Drop-down Menus

Full style rules:

114
 Example: Drop-down Menus

Full style rules:

Top menu item div
is “positioned” but
not moved from normal
flow location

115
 Example: Drop-down Menus

Full style rules:

Upper left corner of

drop-down div overlaps
bottom border of top
menu

116
 Example: Drop-down Menus

Full style rules:

Drop-down drawn over

lower z-index elements

117
 Example: Drop-down Menus

Adding event handlers to top menu:

 Document:

 JavaScript addEventHandlers():
Target
event
handlers

118
 Example: Drop-down Menus

Adding event handlers to top menu:

 Document:

 JavaScript addEventListener():

menuBar1 will be target of events; adding reference to the drop-down

div makes it easy for event handler to access the drop-down

119
Example: Drop-down Menus

120
 Example: Drop-down Menus

Basic
processing:
change
visibility of
drop-down

121
 Example: Drop-down Menus

Ignore
bubbling
mouseover
events from
drop-down

122
 Example: Drop-down Menus

Ignore
mouseout
event if
cursor is
remaining
over menu
item or
drop-down
(self or
descendant)
123
Example: Drop-down Menus

124
 Example: Drop-down Menus

Adding event handlers to drop-down:

 Document:

 JavaScript addEventListener():

125
Example: Drop-down Menus

126
 Example: Drop-down Menus
Don’t
bother
changing
style if
this event
bubbled
from a
descendant.

127
Example: Drop-down Menus

Don’t bubble up to showDropDown since

the drop-down must be visible

128
 Example: Drop-down Menus

Ignore
mouseout to
a descendant

129
 DOM Event Cancellation

Browser provides default event listener for certain

elements and events
 Ex: click on hyperlink
 Ex: click on submit button
Default listeners are called after all user-specified
listeners
stopPropagation() does not affect default
listeners
Instead, call preventDefault() on Event
instance to cancel default event handling

130
DOM Form Validation

131
 DOM Form Validation

<body onload="addListeners();">
<form id="validatedForm" action="http://www.example.com">
<p>
<label>Required input:
<input type="text"
name="requiredField" id="requiredField" />
</label>
<input type="submit"
name="submit" value="Click to submit" />
</p>
</form>
</body>

132
DOM Form Validation

133
DOM Form Validation

Listen for form to be submitted

134
DOM Form Validation

Must use value property to access

value entered in text field on form

135
DOM Form Validation

Regular expression literal representing

“set of strings consisting only of white space”

136
DOM Form Validation

Cancel browser’s default submit event processing

137
 DOM Event Generation

Several Element’s provide methods for

generating events
 Ex: causes text in text field to be
selected and a select event to occur

138
 Detecting Host Objects

How can a JavaScript program test for the

existence of a certain host object?
 Does the style element have a
setProperty() method?

 If we’re also not sure that element is defined

or that style exists:

139
 Detecting Host Objects

Is a browser DOM-compliant?

 Ex: document.implementation(“Core”,
“2.0”) returns true if browser implements all of
DOM 2 Core module, false otherwise
 Problem: what does false tell you?
Many scripts attempt to directly determine the
browser, but…
 What about new browsers?
 Some browsers can “lie” about what they are

140
 IE6 and the DOM

There are a number of non compliance to

the DOM specification in IE6.
We do not cover these in class, but you are
encouraged to read the book and the coming
slides in details, as this problem is very
representative of web programmer’s real life.
Dealing with these issues is part of the trade!

141
 IE6 and the DOM

No Node object (and associated constants)

No setProperty() or
getPropertyValue()
Must use “className” rather than
“class” in setAttribute() and
getAttribute()
Empty div/span height cannot be made
less than character height

142
 IE6 and the DOM

No addEventListener() (so no

multiple listeners)
Cannot use setAttribute() to specify
intrinsic event attribute
 DOM:

 IE6:
Value assigned is a function Object (method)
rather than a String.
143
 IE6 and the DOM

Adding listeners to both IE6 and DOM:

String-valued in DOM, initially null in IE6

144
 IE6 and the DOM

Passing arguments to event listeners:

 DOM:

 IE6:
Listener is called as a method
in IE6, so this is a reference
to button

145
 IE6 and the DOM

Passing arguments to event listeners:

Test that arguments are defined

DOM
approach

146
 IE6 and the DOM

Passing arguments to event listeners:

Test for host object created by IE6 when event occurs

IE6
approach

147
 IE6 and the DOM

Passing arguments to event listeners:

DOM
approach

IE6
approach

148
 IE6 and the DOM

Passing arguments to event listeners:

DOM
approach

IE6
approach

149
 IE6 and the DOM

IE6 does not pass an Event instance to

event listeners
Instead, IE6 creates a global object event
when an (intrinsic) event occurs
Testing for non-DOM call: In a DOM-compliant
call to event listener
there is one
argument that is
an Event instance

Basically an Array
of call arguments 150
 IE6 and the DOM

Converting event object to Event-like:

Undefined if IE6

Global object In IE6, evaluates to Object

created by IE6 value of DOM’s Event
currentTarget property

151
 IE6 and the DOM

Converting event object to Event-like:

152
 IE6 and the DOM

Converting event object to Event-like:

Use
exception
handling
for convenience
rather than
testing
for existence
of properties

153
 IE6 and the DOM

Converting event object to Event-like:

Most type
values
(except
dblclick)
are copied
without
change

154
 IE6 and the DOM

Converting event object to Event-like:

IE6 uses
a different
name for
target

155
 IE6 and the DOM

Converting event object to Event-like:

currentTarget passed in from event listener:

within eventConvert(), this refers to the global object!
156
 IE6 and the DOM

Converting event object to Event-like:

157
 IE6 and the DOM

Converting event object to Event-like:

Use function expressions to define DOM methods as setting IE properties

158
 IE6 and the DOM

Converting event object to Event-like:

Most mouse-event
properties are identical

159
 IE6 and the DOM

Converting event object to Event-like:

Buttons are numbered
differently

160
 IE6 and the DOM

Converting event object to Event-like:

Different names for

relatedTarget

161
 IE6 and the DOM

Converting event object to Event-like:

 Capturing listeners behave somewhat differently
in IE6 and DOM, so eventConvert() did
not attempt to simulate the eventPhase DOM
property

162
 Other Common Host Objects

Browsers also provide many non-DOM

host objects as properties of window
While no formal standard defines these
objects, many host objects are very similar in
IE6 and Mozilla

163
Other Common Host Objects

164
Other Common Host Objects

165
Other Common Host Objects

166
 Other Common Host Objects

open() creates a pop-up window

 Each window has its own global object, host
objects, etc.
 Use pop-ups with care:
 Pop-ups may be blocked by the browser
 They can annoy and/or confuse users

167
Other Common Host Objects

168
Other Common Host Objects

169
Other Common Host Objects

170
Other Common Host Objects

171
Other Common Host Objects

172
Other Common Host Objects

173
Other Common Host Objects

174
Other Common Host Objects

175
Other Common Host Objects

176
 Other Common Host Objects

navigator: (unreliable) information about browser,

including String-valued properties:

appName

appVersion

userAgent
screen: information about physical device, including
Number properties:

availHeight, availWidth: effective screen size (pixels)

colorDepth: bits per pixel

177