Document Object Model

Download
Share  Add to  Flag Embed
Views:
 
Category: Education
     
 
License:   All Rights Reserved

Presentation Description

It tells about how dom really used in javascript,html.And it tells about its levels and w3c standards. And some Dom example programs ,source code and screenshots.

Comments

Presentation Transcript

Slide 1: 

Document Object Model (DOM)‏ By D.Chomaskandar Chipkidz 1 1

Slide 2: 

Outline Introduction of DOM W3C Overview of DOM DOM Examples How the DOM Really works? Advantages and Disadvantages DOM or SAX Summary 2 2

Slide 3: 

Introduction of DOM 3 3

Slide 4: 

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. 4 4

Slide 5: 

World Wide Web Consortium-W3C 5

Slide 6: 

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. 6 6

Slide 7: 

W3C 7

Slide 8: 

Five Basic Levels Of W3C : Recommendation:- It is the Final outcome from W3C.All the Web functions are working properly. 8 No Error HTML,CSS,DOM 8

Slide 9: 

In this layer the work is mostly complete .But some minor changes is occur. Partial Output Proposed Recommendation:- 9

Slide 10: 

Working Document.all Document.all Candidate Recommendation:- Not Working MOZILLA MICROSOFT IE 10

Slide 11: 

Working With Current Task. W3C MEMBERS Working Drafts 11

Slide 12: 

DOM NEUTRAL - INTERFACE HTML XML JAVA SCRIPT ANY LANGUAGE What is the DOM? 12

Slide 13: 

Status Of The DOM 13

Slide 14: 

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

Slide 15: 

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

Slide 16: 

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

Slide 17: 

Overview of DOM 17 17

Slide 18: 

The Document Tree 18 18

Slide 19: 

Referencing Objects-Each Object is Identified by Object Name. 19 19

Slide 20: 

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.body 20

Slide 21: 

The DOM structure model It is a Hierarchy of Node objects 21 node object Element Attribute etc 21

Slide 22: 

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). 22 22

Slide 23: 

Document Tree Structure document document.body document. documentElement 23

Slide 24: 

child, sibling, parent 24

Slide 25: 

child, sibling, parent 25

Slide 26: 

child, sibling, parent 26

Slide 27: 

child, sibling, parent 27

Slide 28: 

28 <Company> <Tenth planet Tech> <Chipkidz> <Hr>Mr. Sakthi</Hr> <Members> <chomas>DOM </chomas> <perumal>SAAS </perumal> </members> </chipkidz> </Tenth planet Tech> ... DOM structure model ID=“BOLD” 28

Slide 29: 

DOM NODE Methods 29 29

Slide 30: 

document .firstChild .childNodes[0] .firstChild .parentNode .childNodes[1]; 30

Slide 31: 

document .getElementById()‏ .getElementByTag()‏ returns a specific element returns an array of elements 31

Slide 32: 

Example for Changing a node document .getElementById(‘BOLD')‏ .firstChild .nodeValue ='bold bit of text'; 32

Slide 33: 

Working with Object Collections-The Web Document Display in the window 33 33

Slide 34: 

Working with Object Properties 34 34

Slide 35: 

Example Source Code For Document Method document.body.style.backgroundColor 35

Slide 36: 

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> 36 36

Slide 37: 

How To Implement In The Blogspot 37

Slide 38: 

38 38

Slide 39: 

39 39

Slide 40: 

40 40

Slide 41: 

41 41

Slide 42: 

42 42

Slide 43: 

NAVIGATOR 43

Slide 44: 

NAVIGATOR :-Some properties are read-only -The Browser Itself. 44 44

Slide 45: 

Example Source Code For Navigator Method navigator.appName navigator.appVersion navigator.appCodeName navigator.platform navigator.cookieEnabled 45

Slide 46: 

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

Slide 47: 

47 47

Slide 48: 

MOZILLA 48 48

Slide 49: 

49 49

Slide 50: 

MICROSOFT INTERNET EXPLORER 50 50

Slide 51: 

51 51

Slide 52: 

GOOGLE CHORME GOOGLE CHORMEZ GOOGLE CHORME 52

Slide 53: 

53

Slide 54: 

SOME OTHER METHODS 54

Slide 55: 

55 55

Slide 56: 

How the DOM Really works? 56 56

Slide 57: 

The Relation Graph Web Client side program (e.g.: JavaScript)‏ Web Server side program (e.g.: ASP)‏ Console program (e.g.: C++, Java)‏ Output DOM 57 57

Slide 58: 

Attributes childNodes nodeName nodeValue firstChild lastChild previousSibling nextSiblin Methods insertBefore replaceChild removeChild appendChild An Example —Most Frequently Used Interface, Node 58

Slide 59: 

DOM in Programming Languages Java C++ C# VB.Net, etc. 59 59

Slide 60: 

DOM Advantages & Disadvantages 60

Slide 61: 

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 61 61

Slide 62: 

SAX 62

Slide 63: 

SAX -Simple API for XML Industry-standard API for parsing XML data. Unidirectional. Event-driven. 63 63

Slide 64: 

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 . 64 64

Slide 65: 

DOM OR SAX 65 65

Slide 66: 

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. 66 66

Slide 67: 

Some DOM Supporting Browsers Konqueror Camino Opera Safari 67

Slide 68: 

SUMMARY 68

Slide 69: 

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 69 69

Slide 70: 

References www.w3.org/DOM http://developer.mozilla.org/en/Gecko_DOM_Reference www.corewebprogramming.com http://www.w3schools.com 70 70

Slide 71: 

QUESTIONS ? 71 71

Slide 72: 

chomaskandar@gmail.com For more Information http://web2sharing.wordpress.com For any Queries 72

Slide 73: 

THANK YOU 73 73