Documente Academic
Documente Profesional
Documente Cultură
Host Objects:
Browsers and the 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
DOM Introduction
Example: Rollover effect
Cursor not over image
DOM Introduction
DOM Introduction
Import
JavaScript
code
DOM Introduction
DOM Introduction
Calls to JavaScript
show() function when
mouse moves over/away
from image
7
DOM Introduction
DOM Introduction
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
13
DOM Introduction
14
DOM Introduction
16
18
19
20
21
Change
background color
of element
containing cursor
22
23
24
25
26
27
28
29
color
backgroundColor
30
31
32
33
CSS property
name
(unmodified)
Empty string
or
important
34
35
36
Document Tree
Recall that HTML document elements
form a tree structure, e.g.,
38
39
40
41
42
44
45
46
47
49
50
51
Event type
52
Jackson, Web Technologies: A Computer Science Perspective, 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
53
Event handler
Definition
of event
handler
54
Event instance
55
Normally false
(more later)
56
57
59
60