-
8/18/2019 5.2 DOM
1/17
5.2 DOM (Document Object
Model)
-
8/18/2019 5.2 DOM
2/17
2
Motto:
To write it, it took three months; to conceive it threeminutes;
to collect the data in it — all my life.
—F. Scott Fitzgerald
-
8/18/2019 5.2 DOM
3/17
3
DOM & DHTML
• Dynamic web page wit! "a#aScript and DOM
$ DHTML %Dynamic HTML
• DOM node and DOM tree
• Tra#ering' editing and modi(ying DOM node
• )diting te*t node
• +cceing' editing and modi(ying element,
attrib-te
-
8/18/2019 5.2 DOM
4/17
4
DOM oncept
• DOM ma/e all component o( a web
page acceible
$ HTML element
$ t!eir attrib-te
$ te*t
• T!ey can be created' modi(ied and
remo#ed wit! "a#aScript
-
8/18/2019 5.2 DOM
5/17
5
DOM Ob0ect
• DOM component are acceible a ob0ect or
collection o( ob0ect
• DOM component (orm a tree o( node
• relation!ip parent node $ c!ildren node• document i
t!e root node
• +ttrib-te o( element are acceible a te*t
• 1rower can !ow DOM #i-ally a an
e*pandable tree
$ Fireb-g (or Fire(o*
$ in 2) 34 Tool 34 De#eloper Tool
-
8/18/2019 5.2 DOM
6/17
6
DOM Standard
• 56 www.w3.org de(ine t!e tandard
• DOM Le#el 6
recommendation $ www.w3.org/TR/DOM-Level-3-Core/
• DOM Le#el 7 HTML
Speci(ication $ www.w3.org/TR/DOM-Level-2-HTML/
$ additional DOM (-nctionality peci(ic to HTML'
inpartic-lar ob0ect (or 8HTML element
• But, t!e de#eloper o( web brower $
don't implement all tandard
$ implement ome tandard differently
$ implement ome additional features
http://www.w3.org/http://www.w3.org/TR/DOM-Level-3-Core/http://www.w3.org/TR/DOM-Level-2-HTML/http://www.w3.org/TR/DOM-Level-2-HTML/http://www.w3.org/TR/DOM-Level-3-Core/http://www.w3.org/
-
8/18/2019 5.2 DOM
7/17
7
+cceing 9ode by id
• +cce to element by t!eir id $
document.getElementById( )
• ret-rn t!e element wit! id
$ id attrib-te can be de(ined in eac! tart
tag• div element wit! id attrib-te can be -ed
a an root node
(or a dynamic DOM -btree
• span element wit! id attrib-te can be -ed a a
dynamicinline element
• T!e pre(erred way to acce element
-
8/18/2019 5.2 DOM
8/17
8
Ot!er +cce Met!od
• +cce by element, tag
$ t!ere are typically e#eral element wit! t!e ame tag
$ document.getElementsByTagName( )
• ret-rn t!e collection o( all element w!oe tag
i
• t!e collection !a a length attrib-te
• an item in t!e collection can be reac!ed by it inde*
$ e.g.• var html =
document.getElementsByTagName("html")!#
• +cce by element, name attrib-te $ e#eral
element can !a#e t!e ame name
$ document.getElementsByName( )
• ret-rn t!e collection o( element wit!
name
-
8/18/2019 5.2 DOM
9/17
9
Tra#ering DOM tree
• Tra#eral t!ro-g! node propertie
$ childNodes property
• t!e #al-e i a collection o( node
$ !a a length attrib-te $ an item can be reac!ed
by it inde*
• e.g. var $ody = html.childNodes%#
$ &irst'hild '
last'hild propertie
$ neti$ling' previousi$ling propertie $ parentNode property
-
8/18/2019 5.2 DOM
10/17
10
Ot!er 9ode ropertie
• nodeType property• E*E+ENT,N-E: HTML element
• TE/T,N-E: te*t wit!in a parent element
• 0TT1IB2TE,N-E: an attrib-te o( a parent element
$ attrib-te can be acceed anot!er way
• '0T0,E'TI-N,N-E $ D+T+ ection are good (or
-n(ormatted te*t
$ nodeName property
$ node3alue property
$ attri$utes property
$ inner4T+* property• not tandard' b-t implemented in
ma0or brower
• #ery -e(-l
$ style property• ob0ect w!oe propertie are all tyle
attrib-te' e.g.' t!oe de(ied in SS
-
8/18/2019 5.2 DOM
11/17
11
+cceing "S Ob0ect, ropertie
• T!ere are two di((erent ynta* (orm to acce
ob0ect, propertie in "S %
$ .
• dot notation' e.g.'
document.nodeType $
• brac/et notation' e.g.' document"nodeType"
• t!i i -ed in &or6in loop
• t!i wor/ (or propertie o( DOM ob0ect' too
-
8/18/2019 5.2 DOM
12/17
12
+ttrib-te o( )lement
• +cce t!ro-g! attri$utes property $ attri$utes
i an array
$ !a a length attrib-te
$ an item can be reac!ed by it inde*
$ an item !a t!e propertie name and value
$ e.g.• var src =
document.images!.attri$utes!.value#
• +cce t!ro-g! (-nction get0ttri$ute( )
$ ret-rn t!e #al-e o( attrib-te $ e.g.
• var src = document.images!.get0ttri$ute("src")#
-
8/18/2019 5.2 DOM
13/17
13
Te*t 9ode
• Te*t node
$ can only be a a lea( in DOM tree
$ it; node3alue property !old t!e te*t
$ inner4T+* can be -ed to acce t!e te*t
• 5atc! o-t: $ There are many more text nodes than youwould
expect!
-
8/18/2019 5.2 DOM
14/17
14
Modi(ying DOM Str-ct-re
• document.createElement( ) $ create a new
DOM element node' wit! tag. $ t!e node till need to be
inerted into t!e DOM tree
• document.createTetNode( ) $ create a new
DOM te*t wit!
$ t!e node till need to be inerted into t!e DOM
tree
• .append'hild( ) $ inert
-
8/18/2019 5.2 DOM
15/17
15
Modi(ying 9ode +ttrib-te
• .set0ttri$ute( 7 ) $ et
t!e #al-e o( attrib-te to
$
e.g.• document.images!.set0ttri$ute("src"7"8ei8i.5pg")#
• T!at, t!e tandard
$ b-t it doen,t wor/ in 2)' t!ere yo- !a#e to -e
• set0ttri$ute( ) $ e.g.
• document.images!.set0ttri$ute("src=9"8ei8i.5pg9"")#
-
8/18/2019 5.2 DOM
16/17
16
56 Doc-ment Ob0ect Model
-
8/18/2019 5.2 DOM
17/17
17
Special DOM Ob0ect
• :indo:
$ t!e brower window
$ new pop-p :indo: can be opened
• document
$ t!e c-rrent web page inide t!e :indo:•
$ody
$ element o( t!e document
• history
$ ite t!at t!e -er #iited
$ ma/e it poible to go bac/ and (ort! -ing cript
• location
$
