5.

2 DOM History and Levels

• Very simple DOM was part of Netscape 2.0

• Netscape 3.0 Modify images, rollover effect
• Starting with Netscape 4.0 and IE 4.0, browser
DOM API’s differ significantly
• W3C responded quickly with DOM Level 1 (Oct
1998) and subsequently DOM Level 2
• DOM level 1 two modules:
– Core DOM
– HTML DOM 1
• Core DOM specifies functionality designed to be
used with any XML document
• HTML DOM specifies access to HTML document
• Level 2 DOM contains both core and HTML with
events and styles extends level 1 functionality
• Level 3 DOM browser support is still evolving
• DOM applies to XML documents as well as to HTML
documents
• DOM used by standalone applications(JAVA)
• Used by scripts running within the browser 2
• This chapter focus on: JavaScript API access to
DOM2 of an HTML document + some coverage
of browser specifics
• There are 6 w3C recommendations that
collectively define DOM Level 2
• This chapter covers four:
– DOM 2 Core
– Events
– Style
– HTML 3
 5.3 Intrinsic Event Handling
• Browser- based Java script programs are event driven
• JavaScript functions are not called directly from the top
level of a java script programs
• Functions are called in response to various user actions
– Clicking a button
– Moving mouse over certain element
• Rollover program example for event-driven program
structure

4
• An event in a browser is an occurance of
potential interest.
– 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
5
Intrinsic Event Handling

6
Intrinsic Event Handling

7
• When using intrinsic event use meta element in the head
of the document
• 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

8
Example HTML document calls window.alert in
response to variety of events

9
 5.4 Modifying Element Style
• DOM access to change the style of an HTML document element in

response to user-initiated event

•Example
•Simple navigation bar consisting of a table of links
• Using java script and DOM it is simple to change the appearance
of items in the navbar as the mouse moves over them

Change
background color
of element
containing cursor

10
Like rollover, style needs to be modified
both when entering and exiting the element.

• Java script function called

• highlight
• called when the cursor enters the region of the screen
occupied by the td element
•lowlight
• called when the cursor exits the region
• These functions change the background color of the td
element
11
 Reference to Element instance
representing the td element

• Each of functions passed the argument this.

• this is a reference to the object on which the method is called

• this is a java script object representing the HTML element (td element)
•td element has number of properties includes style property itself an
object
Reference to Element instance
•The style object defined in DOM 2

Properties of style object

12
correspond to CSS style properties of
the corresponding HTML element.
• Alternative syntax (not supported in IE6):
• The style object provides a setProperty() method that
can be used to modify style properties using their CSS
property names
• Advantage of setProperty()
• 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 it is rather than
requiring modification (which can potentially cause confusion)
CSS property
value

CSS property Empty string

name or 13
(unmodified) “important”
 5.5 Document Tree

• Recall that HTML document elements

form a tree structure, e.g.,
Root of the document tree

Child Elements

• DOM allows scripts to access and modify

the document tree

14
 5.5.1 Node Object
• The document tree accessible to Java script programs run
within a DOM2-browser
• There are many types of nodes in the DOM document tree,
representing elements, text, comments, the document type
declaration, etc.
• The DOM is defined by standard properties and methods.
• Properties are often referred to as something that is (i.e. the name of a
node).
• Methods are often referred to as something that is done (i.e. remove a
node).

• Every Object in the DOM document tree has properties and

methods defined by the Node host object 15
A part of the node tree and the relationship
between the nodes

16
Example HTML fragment

17
• In the HTML DOM, each node is an object.
• Objects have methods and properties that can
be accessed and manipulated by JavaScript.
• Three important node properties are:
– nodeName
– nodeValue
– nodeType

18
Document Tree: Node

19
 Document Tree: Node

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

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

• The Element instance representing the html element

of a document is stored in documentElement property
of the document object
•Use Node methods to walk through the document tree
in order to obtain information about the tree
• Java script used to produce an outline representation
of the Element nodes contained in a document tree

22
Example HTML document

Example HTML document

23
• String produced by TreeOutline():

24
Java Script Program for List reordering

Depth in tree

25
 5.5.2 Example List Reordering

Example tree modifying methods used
removeChild(Node) refer slide 21

To display a list in the browser that can be
reordered by the user

If the user clicks on the list item, then it will be
swapped with the item below it in the list

Java script function is written switchItems()

Function called from the onclick attribute of each li
element in the list
Two steps

Search through the linked list of nodes to find the
siblings of the node corresponding to the list item
that was clicked

Perform search by using nextSibling property
until find the node for the list item following
the one clicked

Remove the node for the list item following the
one clicked and reinsert before the node which is
clicked
 5.5.3 The document Node


The document object itself is considered to be a Dom
tree node

html element is the root of HTML document
In DOM the document object is treated as the root of


the node tree

Also treated as the parent of html Element instance



useful document properties

title, body, getElementById(string),
getElementByTagName(string),
 5.5.4 The Element Node
• Nodes of type ELEMENT_NODE are instances of the
Element host object
• Some methods of Element are
•getAttribute(String)
•setAttribute(String, String)
•hasAttribute(String)

5.5.5 The Text Node

• Instances of the Text DOM object used to represent
character data
•Node type for these elements is Node.TEXT_NODE 29
 5.5.6 Example Collapsible Elements
• Use of document, Element, and text properties and methods
• Function written to make elements of a web page collapsible.
•This shows a web page before a collapse button is clicked
•And shows a page after the expand button is clicked
• Two java script function
•makeCollapsible()
•toggleVisibility()

30
 5.5.6 HTML Convenience Properties
• DOM’s HTML module defines a number of convenience
properties used to set and retrieve element attribute values
without calling setAttribute() and getAttribute()
• Consider the two statement
element.setAttribute(“id”, “element3”);

element.id =“element3”;
• First statement is recommended
• Clear to say accessing HTML attributes
• Special cases the statement two cannot be used
31
•Element.class class is a reserve word in javascript
 5.6 DOM Event Handling
• In this the code is executed in mozilla 1.4
• Much of it will not work in IE6
• Note: IE6 has a different event model
5.6.1 The Event Object and Event Listeners
• When an event occurs , an instance of a host object named
Event is created.
• Event instance created for each event
• Event instance contains information about the event:
– 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.
Event instance properties
32
• Once an event instance is created, it is sent to
certain event listeners.
• Event listener is simply a function that takes a
single argument that is an instance of event
• 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
33
 Example
•Document contains an element with an id of msgbutton
•Java script is executed whenever the mouse is clicked on
the msgButton element and alert box is displayed
•Many of the DOM2 event type same as HTML intrinsic event
•No DOM2 double-click event
Event
target
Event type Event handler

Event instance
Definition of

event
handler

34
OUTPUT

35
 5.6 Mouse Events
• Event instances associated with six DOM2
mouse events
– Click, mousedown, mouseup, mousemove,
mouseover, mouseout
– Detail property can be used to detect a
double-click event
– A double click is represented by an Event
instance with a type of click and a detail value
of 2
– All HTML intrinsic events except keypress,
keydown, keyup, and dblclick
36
DOM Event Handling:
Mouse Events

37
 DOM Event Handling:
Mouse Events
• Example: mouse “trail”

38
 • HTML document:

• JavaScript init() function:

Create
“blips” String uniquely
identifying this div

Add event
listener

• Style sheet for “blips”:

• Event handler updateDivs():

Convert mouse location

from Number to String
and append units

Mod (remainder) operator

used to cycle through “blip” divs
(least-recently changed is the
next div moved)
• Also has some others that are typically
targeted at the window object

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