Document Object Model DOM

1
Document Object Model (DOM)
2
Outline

• Introduction of DOM
• Overview of DOM
• How the DOM works?

3
Introduction of DOM
4
What is the DOM?

• The DOM is a platform- and language-neutral
  interface that will allow programs and scripts to
  dynamically access and update the content,
  structure and style of documents.
• The document can be further processed and the
  results of that processing can be incorporated
  back into the presented page.

Ref http//www.w3c.org/
5
Why the DOM?

• "Dynamic HTML" is a term used by some vendors to
  describe the combination of HTML, style sheets
  and scripts that allows documents to be animated.
• The W3C has received several submissions from
  members companies on the way in which the object
  model of HTML documents should be exposed to
  scripts.
• These submissions do not propose any new HTML
  tags or style sheet technology.

Ref http//www.w3c.org/
6
Status of the DOM

• DOM Level1
• W3C recommendation, 1 Oct. 1998.
• DOM Level2
• W3C recommendation, 13 Nov. 2000.
• DOM Level3
• W3C candidate recommendation, 7 Nov. 2003
• There are many parts in the DOM (e.g. DOM Level2
  contains DOM Level2 Core, DOM Level2 Event,
  etc.).
• Generally speaking, we use the term DOM for
  DOM Core if no specific indication.
• In the following slides, we talk about the DOM
  Level2 Core.

Ref http//www.w3c.org/
7
Overview of DOM
8
The DOM structure model

• The DOM presents documents as a hierarchy of Node
  objects that also implement other, more
  specialized interfaces.
• What is a node object?
• Element, attribute, etc.
• We can say that everything in an XML document
  is a node object.
• Some types of nodes may have child nodes of
  various types, and others are leaf nodes that
  cannot have anything below them in the document
  structure.

9
The DOM Interface

• The DOM has many interfaces to handle various
  node objects.
• Every interface has its Attributes and
  Methods.
• Compare with Object Oriented Programming (OOP).

10
The DOM Interface Hierarchy
Fundamental Interface
DOMImplementation
NamedNodeMap
DOMException
NodeList
Node
Document
CharacterData
Comment
Attr
Text
Element
Extended Interface
DocumentType
CDATASection
Notation
Entity
EntityReference
ProcessingInstruction
11
The simple hierarchy of an XML document
Document
NodeList
Element
Node
NodeList
Node
Node
Comment
Node
Node
Text
Node
Node
Node
Attr


Node
Node
12
The hierarchy of an XML document

• lt?xml version"1.0" encoding"big5"?gt
• ltMemberDatagt
• ltUserNamegtclavenlt/UserNamegt
• ltRealNamegt???lt/RealNamegt
• ltTELDatagt
• ltTELgt03-5712121lt/TELgt
• ltExtgt12345lt/Extgt
• lt/TELDatagt
• ltAddr typeOfficegt?????????lt/Addrgt
• lt/MemberDatagt

13
The simple hierarchy of an XML document
Document
NodeList
Element (root MemberData)
Node
NodeList
Node
Element (UserName)
Node
Element (RealName)
Node
Element (TELData)
Node
Element (TEL)

NodeList
Node
Element (Ext)
Node
Element (Addr)
NodeList
NodeList
Attr (type)
14
(No Transcript)
15
How the DOM works?
16
The Relation Graph
Web Client side program (e.g. JavaScript) Web
Server side program (e.g. ASP) Console program
(e.g. C, Java)
DOM
Output
17
An Example Most Frequently Used Interface, Node

• Attributes
• childNodes
• Return the child nodes in a NodeList
• nodeName
• Return the name of the node
• nodeValue
• Return the value of the node
• firstChild, lastChild, previousSibling,
  nextSibling, etc.
• Methods
• insertBefore, replaceChild, removeChild,
  appendChild, etc.

18
DOM in Programming Languages

• Actually, most programming languages support DOM.
• Java, C, C, VB.Net, etc.
• And almost these programming languages supply
  more convenient attributes and methods than
  standard W3C DOM.