Document Object Model (DOM). Outline Introduction of DOM Overview of DOM DOM Relationships ...

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

[email protected][email protected] # 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>[email protected]<email>[email protected] </email></email> </address></address> </addressdata></addressdata> </addressee> ...</addressee> ...

DocumentDocument

ElementElement

NamedNodeMapNamedNodeMap

TextText

DOM structure modelDOM structure model

Example<script type="text/javascript"></script>

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

Document Object Model (DOM). Outline Introduction of DOM Overview of DOM DOM Relationships ...

Documents

Transcript of Document Object Model (DOM). Outline Introduction of DOM Overview of DOM DOM Relationships ...