???????????? ? ???????????? DOM API

1
???????????? ? ???????????? DOM API

• ?. ???????

2
????

• ???????? DOM API
• ??? ????? DOM
• ????? ????? ????????
• ???????? ???????? DOM API
• ???????
• ???????????? ?????????? ?????????
• ??? ??? ????????
• ????? ??? ?????
• ?????????? ?????? DOM API
• ????? ????? ???? ? ?????? ?? ????????????
• ??????????? ?????? JsUnit
• ?????????? ?????? ?? ?????? ?????????? ??????????
• ???????
• ??????????? ? ??????????????

3
Web ??????????
???????
Web-??????
Silverlight
Flex
????????? ???????
JavaFX
ECMAScript
HTTP
?????????? ???????
???????
??????? DOM Document Object Model
4
?????? ????????????? DOM

• ltHTMLgt ltHEADgt ltTITLEgtDOM Testlt/TITLEgt lt/HEADgt
• ltBODYgt
• ltscript type"text/javascript"gt lt!--
• window.onload function()
• var b document.getElementById("button")
• b.onclick function()
• var num 0
• for(i in document) num
• logtxt("Total number of document members",
  "", num)
• for(i in document) try logtxt(i,
  typeof(documenti), documenti) catch(e)
  
• function logtxt( name, kind, value )
• var p document.createElement("p")
• p.appendChild(document.createTextNode(name
  " " kind " " value))
• document.body.appendChild(p)

5
???????? DOM

• http//www.w3.org/DOM/DOMTR
• ???????? ?????????
• Core http//www.w3.org/TR/2004/REC-DOM-Level-3-C
  ore-20040407
• HTML http//www.w3.org/TR/2003/REC-DOM-Level-2-HT
  ML-20030109
• Style (StyleSheets CSS) http//www.w3.org/TR/200
  0/REC-DOM-Level-2-Style-20001113
• Traversal and Range http//www.w3.org/TR/2000/REC-
  DOM-Level-2-Traversal-Range-20001113
• Load-Save http//www.w3.org/TR/2004/REC-DOM-Level
  -3-LS-20040407
• Validation http//www.w3.org/TR/2004/REC-DOM-Leve
  l-3-Val-20040127
• Element Traversal http//www.w3.org/TR/2008/REC-El
  ementTraversal-20081222
• Xpath http//www.w3.org/TR/2004/NOTE-DOM-Level-3-
  XPath-20040226
• Views and Formatting http//www.w3.org/TR/2004/NOT
  E-DOM-Level-3-Views-20040226
• Events http//www.w3.org/TR/2009/WD-DOM-Level-3-E
  vents-20090908 http//www.w3.org/TR/2009/WD-eve
  ntsource-20091222/
• ?????????????? ?????
• DOM Events http//www.w3.org/TR/tr_DOM_events
• MathML http//www.w3.org/TR/tr_MathML
• SMIL http//www.w3.org/TR/tr_SMIL
• SVG http//www.w3.org/TR/tr_SVG http//www.w3
  .org/TR/tr_SVG_Tiny

6
???????? ?????? DOM
?????? ???? ????????? ?????? ???????? R/W ????????
Core 34 64 89 75 10
HTML 56 36 293 255
Events 15 29 35 45
Views 25 13 32 67 21
Style Sheets 5 4 12 2
CSS 22 37 22 158 132
Traversal 4 16 13 9 1
Range 3 8 19 7
Load-Save 15 15 14 27 15
Validation 5 14 22 13 1
XPath 6 15 7 9
????? 190 211 283 715 437
7
???????? DOM
Level Core HTML Events Views StSh CSS Trav Rng L-S Val XPath ?????
1 (2000) ??? 22 55 77
1 (2000) ??? 35 34 69
1 (2000) ???? 33 289 322
1 (2000) RWA 4 254 258
2 (2000-2003) ??? ??? 2 1 8 2 5 22 4 3 47
2 (2000-2003) ??? ??? 22 2 11 4 22 13 19 93
2 (2000-2003) ??? ???? 8 4 25 2 12 158 9 7 225
2 (2000-2003) ??? RWA 1 1 2 132 1 137
2 (2000-2003) ??? ??? 7 13 20
2 (2000-2003) ??? ??? 1 6 7
2 (2000-2003) ??? ???? 1 21 22
2 (2000-2003) ??? RWA 1 16 17
3 (2004-2010) ??? ??? 10 7 23 15 5 6 66
3 (2004-2010) ??? ??? 32 24 32 14 22 7 131
3 (2004-2010) ??? ???? 35 20 65 27 13 9 169
3 (2004-2010) ??? RWA 5 21 15 1 42
3 (2004-2010) ??? ??? 7 6 13
3 (2004-2010) ??? ??? 5 1 6
3 (2004-2010) ??? ???? 1 1
3 (2004-2010) ??? RWA
8
????????? DOM
9
????????????? Web-??????????
Internet Explorer
?????????? ???????
Mozilla Firefox
Web-??????
????????
????????? ???????
?????????? ???????
Opera
?????????? ???????
10
?????? ???????? ?????????????

• function setBackgroundColor(element, color)
• element.setAttribute("bgcolor", color)

?????????? Element.setAttribute() ? IE ??
????????????? ?????????
function setBackgroundColor(element, color)
if(element.getAttributeNode("bgcolor")) for
(i 0 i lt element.attributes.length i)
if(element.attributesi.name.toUpperCase()
'BGCOLOR') element.attributesi.value
color else element.setAttribute("
bgcolor", color)
11
??? ???????

• ????????????????? ?????????? ?????????
• ???????? ????????????? ? ???????????????
  ??????????
• ??????? ???????? ?????, ??????????? ????????????
  ??
• ??????? ??? ????????????? ? ?????????
• ????????? ???????????? ???? ????? ??? ??????????,
  ???????? ? ?????? ?????????

12
??? ????????? ?????

• W3C DOM Conformance Test Suite
• http//www.w3.org/DOM/Test/
• http//dev.w3.org/cvsweb/2001/DOM-Test-Suite/
• ????????? ????????? ??? 2004
• ???????
• Core L1, L2, L3
• HTML L1, L2
• Events L2, L3 (????? ?????)
• Load-Save L3
• Validation L3
• ?? ??????? ??? ????????? ? ??? ????????? ? 2004
• ??? ????????? ???????????????? ?????? ?
  ???????????
• ?????????? ?? ???????????????? ?? ?????????????,
  ??????? ? ???????????????

13
???????????????? ? ???????????
General, N1
N2
Node insertBefore (Node newChild, Node refChild)
Inserts the node newChild before the existing
child node refChild. If refChild is null, insert
newChild at the end of the list of children. If
newChild is a DocumentFragment p.40 object, all
of its children are inserted, in the same order,
before refChild. If the newChild is already in
the tree, it is first removed. Note Inserting a
node before itself is implementation
dependent. Parameters newChild of type Node
The node to insert. refChild of type Node The
reference node, i.e., the node before which the
new node must be inserted. Return Value The node
being inserted. Exceptions DOMException HIERARCHY
_REQUEST_ERR Raised if this node is of a type
that does not allow children of the type of the
newChild node, or if the node to insert is one
of this nodes ancestors or this node itself, or
if this node is of type Document p.41 and the
DOM application attempts to insert a second
DocumentType p.115 or Element p.85
node. WRONG_DOCUMENT_ERR Raised if newChild was
created from a different document than the one
that created this node. NO_MODIFICATION_ALLOWED_ER
R Raised if this node is readonly or if the
parent of the node being inserted is readonly.
NOT_FOUND_ERR Raised if refChild is not a child
of this node. NOT_SUPPORTED_ERR if this node is
of type Document p.41 , this exception might be
raised if the DOM implementation doesnt support
the insertion of a DocumentType p.115 or
Element p.85 node.
N3
N4
N5
N6
E1
E2
E3
E4
E5
E6
E7
E8
E9
E10
E11
14
??????????????? ? ?????????

• ??? ??????? ? ???? ??? the node being inserted?
• DocumentFragment ??? ??? ????????

• ??? ????? ??? ??????? null?
• ??? ??????? DocumentFragment
• ??? ????? ????????????
• ??? ????????? ?????? ????? ??? ????????????
  ??????? ? ??????
• ????? ?? ???????? ?????? DocumentFragment, ????
  ????????? ????? ???????
• ??? ??????????, ?????????????? ?? ???????
  DocumentType ? Element?
• ?????? ??? ??????????? ?? ??????? ????? ?
  Document?

15
???????????? ?????????

• ??????????? ??????? ????????????? (???????? ????
  ??????????)
• ????????? ????????????????
• ????????? ???????????????, ???????????
• ????????? ?????????
• ??????????? ???????? ???????? ????????????
• ??? ?????? ? ??????? ??????? ???????????
  ?????????
• ??? ?????? ?????? ????????, ? ??????? ?????????
  ?????????

16
?????? Node.insertBefore()
General, N1
N2
Node insertBefore (Node newChild, Node refChild)
Inserts the node newChild before the existing
child node refChild. If refChild is null, insert
newChild at the end of the list of children. If
newChild is a DocumentFragment p.40 object, all
of its children are inserted, in the same order,
before refChild. If the newChild is already in
the tree, it is first removed. Note Inserting a
node before itself is implementation
dependent. Parameters newChild of type Node
The node to insert. refChild of type Node The
reference node, i.e., the node before which the
new node must be inserted. Return Value The node
being inserted. Exceptions DOMException HIERARCHY
_REQUEST_ERR Raised if this node is of a type
that does not allow children of the type of the
newChild node, or if the node to insert is one
of this nodes ancestors or this node itself, or
if this node is of type Document p.41 and the
DOM application attempts to insert a second
DocumentType p.115 or Element p.85
node. WRONG_DOCUMENT_ERR Raised if newChild was
created from a different document than the one
that created this node. NO_MODIFICATION_ALLOWED_ER
R Raised if this node is readonly or if the
parent of the node being inserted is readonly.
NOT_FOUND_ERR Raised if refChild is not a child
of this node. NOT_SUPPORTED_ERR if this node is
of type Document p.41 , this exception might be
raised if the DOM implementation doesnt support
the insertion of a DocumentType p.115 or
Element p.85 node.
N3
N4
N5
N6
E1
E2
E3
E4
E5
E6
E7
E8
E9
E10
E11
17
?????? ???????????? ??????????
???? ?? ????????? ??????? ???? (??
DocumentFragment), ???? ?????? ???? ?????? ????
????????? ? ???????? ?????
???? ?? ????????? DocumentFragment, ??? ????
?????? ???? ????????? ? ???????? ????? ????????
????
???? ?? ????????? DocumentType ? Document, ??
?????? ???? ?????? ????? ???? DocumentType

• Node Node.InsertBefore(Node newChild, Node
  refChild)
• Contract.Requires(newChild ! null) // What
  if newChild is null? DOM specification says
  nothing
• Contract.EnsuresOnThrowltDomExceptiongt (
• // If this node is of a type that does not
  allow children of the type of the newChild node
• !IsAllowedChild(newChild) !(newChild is
  DocumentFragment)
• // -- in particular, if inserted
  DocumentFragment has a prohibited child for this
  node
• newChild is DocumentFragment
  newChild.Children.Count gt 0
• Contract.Exists(0, newChild.Children.Cou
  nt, i gt !IsAllowedChild(newChild.Childreni))
• // or this node is of type Document and
  newChild is a second DocumentType or Element node
• this is Document newChild is
  DocumentType HasDifferentChildOfType(typeof(Doc
  umentType), newChild)
• this is Document newChild is Element
  HasDifferentChildOfType(typeof(Element),
  newChild)
• // -- in part. if inserted DocumentFragment has
  a DocumetType or an Element child, and this node
  has one too
• this is Document newChild is
  DocumentFragment HasDifferentChildOfType(typeof
  (DocumentType), null)
• newChild.HasDifferentChildOfType(typeof(
  DocumentType), null)
• this is Document newChild is
  DocumentFragment HasDifferentChildOfType(typeof
  (Element), null)
• newChild.HasDifferentChildOfType(typeof(
  Element), null)
• // if newChild is this node itself or if
  newChild is one of this node's ancestors
• newChild this Ancestors.Contains(newC
  hild)

E1
E4
E5
E3
E2
E6
?????? ? ???????? ??????? ????????? ??????
???????? ????
E7
E8
?????? ????????? ????, ??????????? ? ??????
??????? ?????????
E9
18
?????? ???????????? ?????
??? ???????????? ?????????? ???????? ??????
?????? ??? ?????? ??????????
N4

• // If the newChild is already in the tree, it
  is first removed
• Contract.Ensures( Contract.OldValueltNodegt(new
  Child.Parent) null Contract.OldValueltNodegt(n
  ewChild.Parent) this
• !Contract.OldValueltNodegt(ne
  wChild.Parent).Children.Contains(newChild) )
• Contract.Ensures( !(newChild is
  DocumentFragment) newChild.Children.Count 0
  )
• // If refChild is null and newChild is not
  DocumentFragment, insert newChild at the end of
  the list of children
• Contract.Ensures( !(refChild null
  !(newChild is DocumentFragment)
  !Contract.OldValueltboolgt(Children.Contains(newChil
  d)))
• Children.Count
  Contract.OldValueltintgt(Children.Count) 1
  ChildrenChildren.Count - 1 newChild
• Children.GetRange(0,
  Children.Count - 1).Equals(
• Contract.OldValueltList
  ltNodegtgt(Children.GetRange(0, Children.Count))) )
• Contract.Ensures( !(refChild null
  !(newChild is DocumentFragment)
  Contract.OldValueltboolgt(Children.Contains(newChild
  )))
• Children.Count
  Contract.OldValueltintgt(Children.Count)
  ChildrenChildren.Count - 1 newChild
• Children.GetRange(0,
  Contract.OldValueltintgt(Children.IndexOf(newChild))
  ).Equals(
• Contract.OldValueltList
  ltNodegtgt(Children.GetRange(0, Children.IndexOf(newC
  hild))))
• Children.GetRange(
  Contract.OldValueltintgt(Children.IndexOf(newChild))
  
• ,
  Children.Count - Contract.OldValueltintgt(Children.I
  ndexOf(newChild)) - 1)
• .Equals(Contract.OldValu
  eltListltNodegtgt(
• Children.GetRange(Chi
  ldren.IndexOf(newChild) 1, Children.Count -
  Children.IndexOf(newChild) - 1))))
• // If refChild isn't null and newChild is not
  DocumentFragment, insert newChild before the
  existing child node refChild
• Contract.Ensures( !(refChild ! null
  !(newChild is DocumentFragment)
  !Contract.OldValueltboolgt(Children.Contains(newChil
  d)))

N2
N1
19
?????? ????????? ???????? I

• ?????
• ??????? ???????? ???? (?? DocumentFragment)
• ??????? ????, ?? ??????????? ???????? ????????
• ??? ?????? ????????
• ?? ????? ?????????
• ??????? ?????? ?? ????? ???????? ???? (??? ????
  ????? ????? ?? ????????)
• ???????????? ? refChild
• ??????????????
• ???????? ??????????????? ????? refChild
• ???????? ????? refChild, ?? ?? ?????
• ???????? ????? refChild
• ??????? DocumentFragment
• ???????
• ?? ?????? ????????
• ?? ?????????? ?????????
• ??????? ? ????? (refChild null)
• ??????? ?? ? ?????
• ? ??????
• ? ????????

20
?????? ????????? ???????? II

• ??????????
• ??????????? ???? ?? ???? ?? ????? ???? ????????
  ????????
• Document --gt DocumentType, Element,
  ProcessingInstruction, Comment
• ?????? ???? ??????? ???? DocumentType ???
  Element
• DocumentFragment, Element, Entity,
  EntityReference --gt Element, ProcessingInstructi
  on, Comment, Text, CDATASection, EntityReference
• Attr --gt Text, EntityReference
• DocumentType, ProcessingInstruction, Comment,
  Text, CDATASection, Notation --gt nothing
• ??????????? ???? ????????? ? ??????? ??? ? ???
  ???????
• ??????????? ???? ?? ??????? ?????????
• ??????? ???? ??????????
• ???????? ???????????? ???? ??????????
• refChild ?? ???????? ???????? ???????? ????
• ??????? ???????? ????
• ??????? DocumentFragment
• ??????? ? ????? (refChild null)
• ??????? ?? ? ?????
• ? ??????
• ? ????????

21
???????? ?????? ??? ?????????

• JsUnit http//www.jsunit.net/
• ???????? ????????
• ???????? ???????
• ????????????? ? ???????????
• ???????????? ??????????
• ???????? ??????

22
?????? ???????? ????????

• lthtmlgt lthead id"headergt ltscript
  language"JavaScript" src"jsunit/app/jsUnitCore.j
  s"gtlt/scriptgt
• ltscript language"JavaScript"gt lt!
• var mainElement
• function setUp()
• mainElement document.documentElement
• function test_Document_ExistingElement_ToEnd()
  
• var l document.childNodes.length
• var res document.insertBefore(mainElement,
  null)
• assertEquals("Result should be inserted
  node", mainElement, res)
• assertEquals("Number of children should
  preserve", l, document.childNodes.length)
• assertEquals("Inserted node should keep to
  be the last child", mainElement,
  document.lastChild)
• assertEquals("This node should become the
  inserted node parent", document,
  mainElement.parentNode)

23
?????? ????????????

• assert(comment, booleanValue)
• assertTrue(comment, booleanValue)
• assertFalse(comment, booleanValue)
• assertEquals(comment, value1, value2)
• assertNotEquals(comment, value1, value2)
• assertNull(comment, value)
• assertNotNull(comment, value)
• assertUndefined(comment, value)
• assertNotUndefined(comment, value)
• assertNaN(comment, value)
• assertNotNaN(comment, value)
• fail(comment)
• ?????????? ?? ?????????????? ?????

24
?????? ????? ?? ??????????

• function test_Document_Text_ToEnd()
• var l doc.childNodes.length
• var parent text.parentNode
• var exception true
• try
• res doc.insertBefore(text, null)
• exception false
• catch(e)
• assertEquals("Exception should be
  HIERARCHY_REQUEST_ERR", 3, e.code)
• assertEquals("Number of children should
  preserve", l, doc.childNodes.length)
• assertEquals("Inserted node parent should
  preserve", parent, text.parentNode)
• if(!exception) fail("Exception should be
  created")

function test_Document_Text_ToEnd() var l
doc.childNodes.length var parent
text.parentNode try res
doc.insertBefore(text, null) fail("Exception
should be created") catch(e)
assertEquals("Exception should be
HIERARCHY_REQUEST_ERR", 3, e.code)
assertEquals("Number of children should
preserve", l, doc.childNodes.length) assertEqual
s("Inserted node parent should preserve", parent,
text.parentNode)
24
25
?????? ????????? ??????

• lthtmlgt ltheadgt lttitlegtDOM Test Suitelt/titlegt
• ltlink rel"stylesheet" type"text/css"
  href"jsunit/css/jsUnitStyle.css"gt
• ltscript language"JavaScript"
  type"text/javascript" src"jsunit/app/jsUnitCore.
  js"gtlt/scriptgt
• ltscript language"JavaScript"
  type"text/javascript"gt
• lt!--
• function coreSuite()
• var result new top.jsUnitTestSuite()
  
• result.addTestPage("http//localhost8
  080/Node_InsertBefore_Normal.html")
• result.addTestPage("http//localhost8
  080/Node_InsertBefore_NodeTypes.html")
• return result
• function suite()
• var newsuite new top.jsUnitTestSuite
  ()
• newsuite.addTestSuite(coreSuite())
• return newsuite
• --gt
• lt/scriptgt

26
??????????? ? ??????????????

• DOM API Testing ?? CodePlex
• http//domapitesting.codeplex.com

26
27
??????? ?? ????????!