Document object model - web technology - chapter 3

Chapter 4
Browsers and the DOM
CSI 3140
WWW Structures, Techniques and Standards

Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson’s slides 2
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

DOM Introduction
Example: “Rollover” effect
Cursor not over image Image changes when cursor
moves over

DOM Introduction

DOM Introduction
Import
JavaScript
code

DOM Introduction
Default language for scripts specified as attribute values

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

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

DOM Introduction

DOM Introduction
DOM method returning Object

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

DOM Introduction
Some properties of
Element instance
correspond
to attributes of
HTML element

DOM Introduction
Method inherited by Element instances
for setting value of an attribute

DOM Introduction
Effect: src attribute of HTML element with
specified eltId is changed to specified URL

DOM Introduction
Image src changed to
CFP22.png when mouse
is over image,
CFP2.png when leaves

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

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

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

Modifying Element Style
Change
background color
of element
containing cursor

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

Reference to Element instance
representing the td element

Reference to Element instance

All Element instances have a style property
with an Object value

Properties of style object
correspond to CSS style properties of
the corresponding HTML element.

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

Net effect: “silver” becomes the specified value for
CSS background-color property of td element;
browser immediately modifies the window.

Alternative syntax (not supported in IE6):

Alternate syntax (not supported in IE6):
Every DOM2-compliant style object
has a setProperty() method

Alternate syntax (not supported in IE6):
CSS property
name
(unmodified)
CSS property
value
Empty string
or
“important”

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)

Obtaining specified CSS property value:
Alternate DOM2 syntax (not supported by
IE6):

Document Tree
Recall that HTML document elements form
a tree structure, e.g.,
DOM allows scripts to access and modify
the document tree

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

Document Tree: Node

Document Tree: Node
Example HTML document
Function we will write that will
use Node methods and properties
to produce string representing
Element tree

Document Tree: Node
String produced by TreeOutline():

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

Document Tree: Node

Document Tree: Node
Contains nodeType value representing Element

Document Tree: Node
Ignore non-Element’s

Document Tree: Node
Add nodeName to string

Document Tree: Node
Recurse on
child nodes

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

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.

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

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

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

Returns null if
no next sibling

Converting
null to Boolean
produces false

Swap nodes
if an li
element
follows

Operate on a node by calling methods
on its parent

Remove following element from tree
Re-insert element earlier in tree

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)

Document Tree: Element Nodes

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

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:

<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> Effect of executing makeCollapsible():
Added
to DOM
tree:

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

Node
creation

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

Attribute
addition

Before clicking button: After clicking button:

Modifying text.

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

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.

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

DOM Event Handling

DOM Event Handling
Event
target

DOM Event Handling
Event type

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:

DOM Event Handling
Event handler
Definition
of event
handler

DOM Event Handling
Event instance

DOM Event Handling
Normally false
(more later)

DOM Event Handling

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

DOM Event Handling:
Mouse Events

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

DOM Event Handling:
Mouse Events
HTML document:
JavaScript init() function:
Create
“blips”
Add event
listener
String uniquely
identifying this div

DOM Event Handling:
Mouse Events
Style sheet for “blips”:
Initially, not displayed

DOM Event Handling:
Mouse Events
Event handler updateDivs():
Convert mouse location
from Number to String
and append units

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)

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

Three types of event listeners:

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

Target: Listener on target element

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

Priority of event handlers:
body
ol
li
a
1. Capturing event
handlers; ancestors
closest to root
have highest
priority
Target

body
ol
li
a
2. Target event handlers

body
ol
li
a
3. Bubbling event
handlers; ancestors
closest to target have
priority.

Certain events do not bubble, e.g.,
 load
 unload
 focus
 blur

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

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)

Example: Drop-down Menus
When cursor
moves over
upper menu
…

…
a drop-down
appears

Background color changes
as cursor moves over
drop-down items

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

Document structure:

Document structure: Event handlers will be added by
JavaScript code

Top menu
is a table

Each top
menu item is
a (positioned)
div
CSS:

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

Associated
drop-down is
a table

Full style rules:

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

Upper left corner of
drop-down div overlaps
bottom border of top
menu

Drop-down drawn over
lower z-index elements

Adding event handlers to top menu:
 Document:
 JavaScript addEventHandlers():
Target
event
handlers

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

Basic
processing:
change
visibility of
drop-down

Ignore
bubbling
mouseover
events from
drop-down

Ignore
mouseout
event if
cursor is
remaining
over menu
item or
drop-down
(self or
descendant)

Adding event handlers to drop-down:
 Document:
 JavaScript addEventListener():

Don’t
bother
changing
style if
this event
bubbled
from a
descendant.

Don’t bubble up to showDropDown since
the drop-down must be visible

Ignore
mouseout to
a descendant

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

DOM Form Validation

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>

DOM Form Validation

DOM Form Validation
Listen for form to be submitted

DOM Form Validation
Must use value property to access
value entered in text field on form

DOM Form Validation
Regular expression literal representing
“set of strings consisting only of white space”

DOM Form Validation
Cancel browser’s default submit event processing

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

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:

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

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!

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

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.

IE6 and the DOM
Adding listeners to both IE6 and DOM:
String-valued in DOM, initially null in IE6

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

IE6 and the DOM
DOM
approach
Test that arguments are defined

IE6 and the DOM
IE6
approach
Test for host object created by IE6 when event occurs

IE6 and the DOM
IE6
approach
DOM
approach

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

IE6 and the DOM
Converting event object to Event-like:
Undefined if IE6
Global object
created by IE6
In IE6, evaluates to Object
value of DOM’s Event
currentTarget property

IE6 and the DOM

IE6 and the DOM
Use
exception
handling
for convenience
rather than
testing
for existence
of properties

IE6 and the DOM
Most type
values
(except
dblclick)
are copied
without
change

IE6 and the DOM
IE6 uses
a different
name for
target

IE6 and the DOM
currentTarget passed in from event listener:
within eventConvert(), this refers to the global object!

IE6 and the DOM

IE6 and the DOM
Use function expressions to define DOM methods as setting IE properties

IE6 and the DOM
Most mouse-event
properties are identical

IE6 and the DOM
Buttons are numbered
differently

IE6 and the DOM
Different names for
relatedTarget

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

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

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

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

Document object model - web technology - chapter 3

More Related Content

Similar to Document object model - web technology - chapter 3 (8)

Recently uploaded (20)

Document object model - web technology - chapter 3