Chapter5 New [EDocFind.com][1]

8/4/2019 Chapter5 New [EDocFind.com][1]

1/60

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

Chapter 5

Host Objects:

Browsers and the DOM

WEB TECHNOLOGIES

A COMPUTER SCIENCE PERSPECTIVE

JEFFREY C. JACKSON

1


2/60


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 APIis 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


3/60


DOM Introduction

Example: Rollover effect

Cursor not over image Image changes when cursor

moves over

3


4/60


DOM Introduction

4


5/60


DOM Introduction

Import

JavaScriptcode

5


6/60


7/60


8/60


DOM Introduction

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

8


9/60


DOM Introduction

9


10/60


DOM Introduction

DOM method returning Object

10


11/60


DOM Introduction

Returns instance

ofElement(DOM-defined

host object)

representing

HTML element

with given id

11


12/60


DOM Introduction

Some properties of

Element instance

correspond

to attributes ofHTML element

12


13/60


DOM Introduction

Method inherited by Element instancesfor setting value of an attribute

13


14/60


DOM Introduction

Effect: src attribute of HTML element withspecified eltId is changed to specified URL

14


15/60


DOM Introduction

Image src changed toCFP22.png when mouseis over image,

CFP2.png when leaves

15


16/60


DOM History and Levels

Very simple DOM was part of Netscape

2.0

Starting with Netscape 4.0 and IE 4.0,browser DOM APIs diverged significantly

W3C responded quickly with DOM Level 1

(Oct 1998) and subsequently DOM Level 2

This chapter: JavaScript API forDOM2 +

some coverage of browser specifics

16


17/60


18/60


Intrinsic Event Handling

18


19/60



19


20/60



20


21/60



Intrinsic event attribute value is a script;

what language is it written in?

HTTP Content-Script-Type header fieldspecifies default scripting language

meta element allows document to specifyvalues as if they were header fields

Header field name Header field value

21


22/60


Modifying Element Style

Change

background color

of element

containing cursor

22


23/60



23


24/60


25/60



Reference to Element instancerepresenting the td element

25


26/60



26


27/60



Reference to Element instance

27


28/60



All Element instances have a style propertywith an Object value

28


29/60



Properties ofstyle objectcorrespond to CSS style properties of

the corresponding HTML element.

29


30/60



Rules for forming style property namesfrom names of CSS style properties:

If the CSS property name contains no

hyphens, then the style objects propertyname is the same

Ex: color color

Otherwise, all hyphens are removed and the

letters that immediately followed hyphens arecapitalized

Ex: background-color backgroundColor

30


31/60



Net effect: silver becomes the specified value forCSS background-color property oftd element;browser immediately modifies the window.

31


32/60



Alternative syntax (not supported in IE6):

32


33/60



Alternate syntax (not supported in IE6):

Every DOM2-compliant style objecthas a setProperty() method

33


34/60



Alternate syntax (not supported in IE6):

CSS property

name

(unmodified)

CSS property

value

Empty string

or

important

34


35/60



Advantages ofsetProperty() 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


36/60


37/60


Document Tree

Recall that HTML document elements

form a tree structure, e.g.,

DOM allows scripts to access and modifythe document tree

37


38/60


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


39/60


Document Tree: Node

39


40/60


Document Tree: Node

40


41/60


Document Tree: Node

41


42/60


Document Tree: Node

42


43/60


Document Tree: Node

Example HTML document

Function we will write that will

use Node methods and propertiesto produce string representing

Element tree

43


44/60


Document Tree: Node

String produced by TreeOutline():

44


45/60


Document Tree: Node

Example: walking the tree of an HTML

document

Reference to html element is contained indocumentElement property ofdocumentobject

Use Node-defined methods to recursively

create an outline ofnodeNa

mes: Depth in tree

45


46/60


Document Tree: Node

46


47/60


Document Tree: Node

Contains nodeType value representing Element

47


48/60


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 documentelement that generated the event (e.g.,

button element for click, img formouseover). This is the event target.

48


49/60


DOM Event Handling

JavaScript event listener: function that is

called with Event instance when a certainevent occurs

An event listener is associated with a

target element by calling

addEventListener() on the element

49


50/60


DOM Event Handling

50


51/60


DOM Event Handling

Event

target

51


52/60


53/60


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


54/60


DOM Event Handling

Event handler

Definition

of event

handler

54


55/60


DOM Event Handling

Event instance

55


56/60


57/60


58/60


59/60


DOM Event Handling:

Mouse Events

59


60/60

Documents

Chapter5 New [EDocFind.com][1]