Download - Document Object Model
![Page 1: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/1.jpg)
Document Object Model (DOM)
By
D.Chomaskandar
Chipkidz
11
![Page 2: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/2.jpg)
Outline
Introduction of DOM W3C Overview of DOM DOM Examples How the DOM Really works? Advantages and Disadvantages DOM or SAX Summary
22
![Page 3: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/3.jpg)
Introduction of DOM
33
![Page 4: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/4.jpg)
Before going to the DOM
HTML –How to Display the Data in the Webpage.
XML – How to Describe the Data . DHTML- How to Add Movement or
Animation to an HTML Document. JAVASCRIPT- How to make Web
Content Dynamic.
44
![Page 5: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/5.jpg)
World Wide Web Consortium-W3C
5
![Page 6: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/6.jpg)
World Wide Web Consortium-W3C
To Promote Open Standard For world wide web.
W3C is a vendor Organization. Main Vendors are Netscape and
Microsoft. Some W3C Standards are
HTTP,HTML,XML,CSS. DOM is also Recommend by W3C.
66
![Page 7: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/7.jpg)
W3C
7
![Page 8: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/8.jpg)
Five Basic Levels Of W3C :
Recommendation:- It is the Final outcome from W3C.All the Web functions are working properly.
8
No ErrorHTML,CSS,DOM
8
![Page 9: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/9.jpg)
In this layer the work is mostly complete .But some minor changes is occur.
Partial Output
Proposed Recommendation:-
9
![Page 10: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/10.jpg)
Working
Document.all Document.all
Candidate Recommendation:-
Not Working
MOZILLA
MICROSOFT
IE
10
![Page 11: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/11.jpg)
Working With Current Task.
W3C
MEMBERS
Working Drafts
11
![Page 12: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/12.jpg)
DOM
NEUTRAL - INTERFACE
HTML XMLJAVA SCRIPT
ANY LANGUAGE
What is the DOM?
12
![Page 13: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/13.jpg)
Status Of The DOM
13
![Page 14: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/14.jpg)
W3C recommendation, 1 Oct. 1998.
Interfaces for representing an XML and HTML document.
1)Document
2)Node
3)Attr
4)Element
5)and Text interfaces.
14
DOM Level 1:
14
![Page 15: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/15.jpg)
W3C recommendation, 13 Nov. 2000.
It contains six different specifications:
1)DOM2 Core
2)Views
3)Events
4)Style
5)Traversal and Range
6)and the DOM2 HTML.
15
DOM Level 2:
15
![Page 16: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/16.jpg)
W3C candidate recommendation, 7 Nov. 2003
It contains five different specifications:
1)DOM3 Core
2)Load and Save
3) Validation
4)Events
5)and XPath
16
DOM Level 3:
16
![Page 17: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/17.jpg)
Overview of DOM
1717
![Page 18: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/18.jpg)
The Document Tree
1818
![Page 19: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/19.jpg)
Referencing Objects-Each Object is Identified by Object Name.
1919
![Page 20: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/20.jpg)
How To Use Referencing Objects
Object Names General form is
TO Access The History
To Access The Body
20
object1.object2.object3..
window.history
document.body20
![Page 21: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/21.jpg)
The DOM structure model
It is a Hierarchy of Node objects
21
node object
Element
Attribute
etc
21
![Page 22: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/22.jpg)
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).
MethodMethod
PropertyAttribute
Object ClassInterface
OOPDOM
2222
![Page 23: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/23.jpg)
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
23
![Page 24: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/24.jpg)
child, sibling, parent
#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
24
![Page 25: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/25.jpg)
child, sibling, parent
#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
25
![Page 26: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/26.jpg)
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
26
![Page 27: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/27.jpg)
child, sibling, parent
#text
H1 H2P
BODY
#text
P
#text#text
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
first
Chi
ld
nextSibling nextSibling nextSibling
27
![Page 28: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/28.jpg)
28
<Company><Company> <Tenth planet Tech><Tenth planet Tech> <Chipkidz><Chipkidz> <Hr>Mr. Sakthi</Hr><Hr>Mr. Sakthi</Hr> <Members><Members> <chomas>DOM<chomas>DOM </chomas></chomas> <perumal>SAAS<perumal>SAAS </perumal></perumal> </members></members> </chipkidz></chipkidz> </Tenth planet Tech> ...</Tenth planet Tech> ...
DOM structure modelDOM structure modelID=“BOLD”
28
![Page 29: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/29.jpg)
DOM NODE MethodsMethod Name Description
appendChild Appends a child node.
cloneNode Duplicates the node.
getAttributes Returns the node’s attributes.
getChildNodes Returns the node’s child nodes.
getNodeName Returns the node’s name.
getNodeType Returns the node’s type (e.g., element, attribute, text, etc.).
getNodeValue Returns the node’s value.
getParentNode Returns the node’s parent.
hasChildNodes Returns true if the node has child nodes.
removeChild Removes a child node from the node.
replaceChild Replaces a child node with another node.
setNodeValue Sets the node’s value.
insertBefore Appends a child node in front of a child node.
2929
![Page 30: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/30.jpg)
document
.firstChild
.childNodes[0]
.firstChild
.parentNode
.childNodes[1];30
![Page 31: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/31.jpg)
document
.getElementById()
.getElementByTag()
returns a specific element
returns an array
of elements31
![Page 32: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/32.jpg)
Example for Changing a node
document
.getElementById(‘BOLD')
.firstChild
.nodeValue
='bold bit of text';
32
![Page 33: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/33.jpg)
Working with Object Collections-The Web Document Display in the window
3333
![Page 34: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/34.jpg)
Working with Object Properties
3434
![Page 35: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/35.jpg)
Example Source Code
For Document Method
document.body.style.backgroundColor
35
![Page 36: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/36.jpg)
Examples For Document method <html>
<head>
<title>Change the Background</title>
</head>
<body>
<script language = "JavaScript">
function background()
{ var color = document.bg.color.value;
document.body.style.backgroundColor=color; } </script>
<form name="bg">
Type the Color Name:<input type="text" name="color" size="20"><br>
Click the Submit Button to change this Background color as your Color.<br>
<input type="button" value="Submit" onClick='background()'>
</form>
</body>
</html>3636
![Page 37: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/37.jpg)
How To Implement
In
The Blogspot
37
![Page 38: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/38.jpg)
3838
![Page 39: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/39.jpg)
3939
![Page 40: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/40.jpg)
4040
![Page 41: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/41.jpg)
4141
![Page 42: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/42.jpg)
4242
![Page 43: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/43.jpg)
NAVIGATOR
43
![Page 44: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/44.jpg)
NAVIGATOR :-Some properties are read-only -The Browser Itself.
4444
![Page 45: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/45.jpg)
Example Source Code
For Navigator Method
navigator.appName
navigator.appVersion
navigator.appCodeName
navigator.platform
navigator.cookieEnabled
45
![Page 46: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/46.jpg)
Example For NAVIGATOR <html><body><script type="text/javascript">
document.write("<p>Browser: ");
document.write(navigator.appName + "</p>");
document.write("<p>Browserversion: ");
document.write(navigator.appVersion + "</p>");
document.write("<p>Code: ");
document.write(navigator.appCodeName + "</p>");
document.write("<p>Platform: ");
document.write(navigator.platform + "</p>");
document.write("<p>Cookies enabled: ");
document.write(navigator.cookieEnabled + "</p>");
document.write("<p>Browser's user agent header: ");
document.write(navigator.userAgent + "</p>");
</script></body></html>
46
![Page 47: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/47.jpg)
4747
![Page 48: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/48.jpg)
MOZILLA
4848
![Page 49: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/49.jpg)
4949
![Page 50: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/50.jpg)
MICROSOFT INTERNET EXPLORER
5050
![Page 51: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/51.jpg)
5151
![Page 52: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/52.jpg)
GOOGLE CHORMEGOOGLE CHORMEZ GOOGLE CHORME
52
![Page 53: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/53.jpg)
53
![Page 54: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/54.jpg)
SOME OTHER METHODS
54
![Page 55: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/55.jpg)
5555
![Page 56: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/56.jpg)
How the DOM Really works?
5656
![Page 57: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/57.jpg)
The Relation Graph
XMLdocument
Web Client side program (e.g.: JavaScript)Web Server side program (e.g.: ASP)Console program (e.g.: C++, Java)
Output
DOM
XML+HTMLdocument
5757
![Page 58: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/58.jpg)
Attributes
childNodes
nodeName
nodeValue
firstChild lastChild
previousSibling nextSiblin
Methods
insertBefore
replaceChild
removeChild
appendChild
An Example —Most Frequently Used Interface, Node
58
![Page 59: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/59.jpg)
DOM in Programming Languages Java
C++
C#
VB.Net, etc.
5959
![Page 60: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/60.jpg)
DOM Advantages & Disadvantages
60
![Page 61: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/61.jpg)
DOM Advantages & Disadvantages
ADVANTAGES
- Robust API for the DOM tree
- Relatively simple to modify the data structure and extract data
Disadvantages
- Stores the entire document in memory
- As Dom was written for any language, method naming conventions don’t follow standard java programming conventions
6161
![Page 62: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/62.jpg)
SAX
62
![Page 63: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/63.jpg)
SAX -Simple API for XML
Industry-standard API for parsing XML data.
Unidirectional.
Event-driven.
6363
![Page 64: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/64.jpg)
The History of SAX
Not a W3C recommendation. Created by members of the xml-dev mailing list, led by David Megginson.
SAX implementations for Java and C++ have been around for a while.
SAX2 is the current API revision .
6464
![Page 65: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/65.jpg)
DOM OR SAX
6565
![Page 66: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/66.jpg)
DOM or SAX DOM
- Suitable for small documents
- Easily modify document
- Memory intensive;Load the complete XML document
SAX -
- Suitable for large documents; saves significant amounts of memory
- Only traverse document once, start to end
- Event driven
- Limited standard functions.
6666
![Page 67: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/67.jpg)
Some DOM Supporting Browsers
Konqueror CaminoOpera
Safari
67
![Page 68: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/68.jpg)
SUMMARY
68
![Page 69: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/69.jpg)
Summary
DOM is a tree representation of an XML document in memory
Dom provides a robust API to easily Modify and extract data from an XML document
JAXP provides a vendor –neutral interface to the underlying DOM or SAX Parser
6969
![Page 70: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/70.jpg)
References www.w3.org/DOM
http://developer.mozilla.org/en/Gecko_DOM_Reference
www.corewebprogramming.com
http://www.w3schools.com
7070
![Page 71: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/71.jpg)
QUESTIONS ?
7171
![Page 73: Document Object Model](https://reader036.vdocument.in/reader036/viewer/2022062405/5552c0c8b4c905920f8b482d/html5/thumbnails/73.jpg)
THANK YOU
7373