WEB TECHNOLOGIES

A COMPUTER SCIENCE PERSPECTIVE

JEFFREY C. JACKSON

Chapter 5
Host Objects:
Browsers and the DOM

1
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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
– Many others are covered in this chapter
2
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction
• Example: “Rollover” effect

Cursor not over image Image changes when cursor

moves over

3
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

4
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

Import
JavaScript
code

5
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

Default language for scripts specified as attribute values

6
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

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

7
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

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

8
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

9
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

DOM method returning Object

10
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

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

11
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

Some properties of
Element instance
correspond
to attributes of
HTML element

12
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

Method inherited by Element instances

for setting value of an attribute

13
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

Effect: src attribute of HTML element with

specified eltId is changed to specified URL

14
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Introduction

Image src changed to

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

15
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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
• This chapter: JavaScript API for DOM2 +
some coverage of browser specifics
16
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Intrinsic Event Handling

18
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Intrinsic Event Handling

19
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Intrinsic Event Handling

20
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style

Change
background color
of element
containing cursor

22
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style

23
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style
Like rollover, style needs to be modified
both when entering and exiting the element.

24
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style
Reference to Element instance
representing the td element

25
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style

26
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style
Reference to Element instance

27
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style

All Element instances have a style property

with an Object value

28
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style

Properties of style object

correspond to CSS style properties of
the corresponding HTML element.

29
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style

Net effect: “silver” becomes the specified value for

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

31
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style
• Alternative syntax (not supported in IE6):

32
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style
• Alternate syntax (not supported in IE6):

Every DOM2-compliant style object

has a setProperty() method

33
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style
• Alternate syntax (not supported in IE6):
CSS property
value

CSS property Empty string

name or
(unmodified) “important”

34
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Modifying Element Style
• Obtaining specified CSS property value:

• Alternate DOM2 syntax (not supported by

IE6):

36
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree
• Recall that HTML document elements
form a tree structure, e.g.,

• DOM allows scripts to access and modify

the document tree

37
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree: Node

39
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree: Node

40
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree: Node

41
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree: Node

42
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree: Node
Example HTML document

Function we will write that will

use Node methods and properties
to produce string representing
Element tree
43
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree: Node
• String produced by TreeOutline():

44
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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

45
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree: Node

46
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 Document Tree: Node

Contains nodeType value representing Element

47
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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.

48
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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

49
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling

50
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling

Event
target

51
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling

Event type

52
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 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:

53
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling

Event handler

Definition
of event
handler

54
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling

Event instance

55
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling

Normally false
(more later)

56
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling

57
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling:
Mouse Events
• DOM2 mouse events
– click
– mousedown
– mouseup
– mousemove
– mouseover
– mouseout
• Event instances have additional
properties for mouse events
58
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling:
Mouse Events

59
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
 DOM Event Handling:
Mouse Events
• Example: mouse “trail”

60
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0