View
253
Download
1
Category
Preview:
DESCRIPTION
Document Is The Application With the introduction of client-side event- handling scripting languages such as JavaScript, the nature of documents changed from passive to active. The documents themselves became "live" applications.
Citation preview
Document Object Model (DOM)
Outline Introduction of DOM Overview of DOM DOM Relationships Standard DOM
Document Is The Application With the introduction of client-side event-
handling scripting languages such as JavaScript, the nature of documents changed from passive to active.
The documents themselves became "live"
applications.
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.
What is the DOM? (continue) The Document Object Model
describes each document as a collection of objects, all the way down to the individual characters.
Overview of DOM
Document Is The Collection Of Objects
The DOM presents documents as collection of element as objects. Every element have attributes called properties. Elements can also have methods and events. We can say that “everything” in an HTML document is a object.
How can the scripts identify an element?
Each element can be assigned a id or name (its tag name).
For example, we can assign the H2 element an ID attribute that uniquely identifies it:
The Object Model Concept of DOM is that there is a rigid structure
defined to access the various HTML elements. The model starts from the browser window itself. Window contains either documents or collection
of frames. Document is a collection of HTML elements. Key to accessing the elements in a document is
to understand the hierarchy.
DOM As A Structure ModelDOM Table
<TABLE><TBODY><TR><TD>a11</TD><TD>a12</TD></TR><TR><TD>a21</TD><TD>a22</TD></TR></TBODY></TABLE>
DOM Table
invoiceinvoice
invoicepageinvoicepage
namename
addresseeaddressee
addressdataaddressdata
addressaddress
form="00"form="00"type="estimatedbill"type="estimatedbill"
Anees AhmadAnees Ahmad streetaddressstreetaddress emailemail
aanees_ahmad@yahoo.comaanees_ahmad@yahoo.comStreet # 1Street # 1
<invoice><invoice> <invoicepage form="00" <invoicepage form="00" type="estimatedbill">type="estimatedbill"> <addressee><addressee> <addressdata><addressdata> <name>Anees Ahmad</name><name>Anees Ahmad</name> <address><address> <streetaddress> <streetaddress> Street # 1Street # 1 </streetaddress></streetaddress> <email>aanees_ahmad@yahoo.com<email>aanees_ahmad@yahoo.com </email></email> </address></address> </addressdata></addressdata> </addressee> ...</addressee> ...
DocumentDocument
ElementElement
NamedNodeMapNamedNodeMap
TextText
DOM structure modelDOM structure model
Example<script type="text/javascript"><!--function sayHello(){ var theirname; theirname=document.myform.username.value; if (theirname != "") alert("Hello "+theirname+"!"); else alert("Don't be shy.");}// --></script>
<body><form action="#" name="myform" id="myform"><b>What's your name?</b> <input type="text" name="username" id="username" size="20" /> <input type="button" value="Greet" onclick="sayHello();" /></form></body>
Node Objects Each node of the document tree may have
any number of child nodes. A child will always have an ancestor and can have siblings or descendants. All nodes, except the root node, will have a parent node.
Document Tree Structure<html> <body> <h1>Heading 1</h1> <p>Paragraph.</p> <h2>Heading 2</h2> <p>Paragraph.</p> </body></html>
#text
H1
H2
P
BODY
HTML
#document
HEAD
#text
P
#text
#text
document
document.body
Document..documentElement
childs
#text
H1 H2P
BODY
#text
P
#text#text
lastChild
last
Chi
ld
last
Chi
ld
last
Chi
ld
last
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
child, sibling
#text
H1 H2P
BODY
#text
P
#text#text
lastChild
last
Chi
ld
last
Chi
ld
last
Chi
ld
last
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
nextSibling nextSibling nextSibling
previousSibling previousSibling previousSibling
child, sibling, parent
#text
H1
#text #text#text
lastChild
last
Chi
ld
last
Chi
ld
last
Chi
ld
last
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
nextSibling nextSibling nextSibling
previousSibling previousSibling previousSibling
pare
ntN
ode
pare
ntN
ode
pare
ntN
ode
pare
ntN
ode
pare
ntN
ode
H2P P
BODY
DOM Relationship
DOM establishes two basic types of relationships Navigation
The ability to traverse the node hierarchy, and Reference
The ability to access a collection of nodes by name.
Navigation Given a node, you can find out where it is located in
the document structure model and you can refer to the parent, child as well as siblings of this node. This might be done using the NodeList object, which represents an ordered collection of nodes.
getParentNode() getFirstChild() getNextSibling() getPreviousSibling() getLastChild()
Reference
A unique name or ID can be assigned to each image using the NAME OR ID attribute.
A script can use this relationship to reference a object.
This might be done using the NamedNodeMap object.
Standard DOM
Standard DOM The W3C has prosped a standard Document
Object Model called the DOM that should alleviate many of the incompatibilities and allow a developer to access the contents of a document in a standard fashion.
To access an element using the DOM we use the getElementById method and specify the id attribute of the object we desire to access.
Example<body><h1 align="center">The Dynamic Paragraph</h1><hr /><p id="para1">I am a dynamic paragraph. Watch me dance!</p><hr /><form action="#"><input type="button" value="Right" onclick="getElementById('para1').align='right';" /><input type="button" value="Left" onclick="getElementById('para1').align='left';" /><input type="button" value="Center" onclick="getElementById('para1').align='center';" /></form></body>
Conclusion The DOM is a model in which the
document contains objects. Each object has properties and methods
associated with it that can be accessed by a scripting language for manipulation.
DOM is the "Dynamic" of Dynamic HTML
Recommended