Your SlideShare is downloading. ×
Dom
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dom

368
views

Published on

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
368
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Document Object Model
  • 2. What is DOM?DOM is a platform-and language-neutral interface that will allowprograms and scripts to dynamically access and update the content,structure and style of documents.
  • 3. Why the DOM?The DOM (Document Object Model) gives you genericaccess to most elements, their styles and attributes in adocument.
  • 4. DOM ArchitectureDocument object model is aframework that organizes howelements are referenced and howthey interact with each other.
  • 5. ExampleHow scripts reference elements of a document.How styles are applied to elements.How scripts change styles.
  • 6. Different Document Objects Document Object Anchor Object Button Object Form Object Image Object Event Object
  • 7. Document ObjectProvides access to all HTML elements in a page, from within a script. Anchor Object Allows you to create a link to another document.Button ObjectRepresents a push button.
  • 8. Form ObjectUsed to collect user input, and contain input elements. Image Object Represents an embedded image.Event ObjectPerforms the action associated with events.
  • 9. Document object -Example<html><body bgcolor=“#56ce56”><script type="text/javascript">document.write(“GENIUS");</script></body></html>
  • 10. Button object -Example<html><body bgcolor=“#654c45”><button id=“Genius1" name=“Genius1">Click Me!</button><p>The name of the button is:<script type="text/javascript">document.write(document.getElementById(“Genius1").name);</script></p></body></html>
  • 11. Form object -Example<html><body bgcolor="#87cb56"><form id="frm1" action="form_action.asp">Last name: <input type="text" name="lname" value="Adi" /><br /><input type="submit" value="Submit" /></form><p>Return the value of each element in the form:</p><script type="text/javascript">var x=document.getElementById("frm1");for (var i=0;i<x.length;i++){document.write(x.elements[i].value);document.write("<br />");} </script></body></html>
  • 12. JavaScript HTML DOM JavaScript is used to access and manipulate HTML DOM objects.Example <html><head> <script type="text/javascript"> function disable_button() { document.getElementById("myButton").disabled=true; } </script> </head>
  • 13. Example Cont…<body><button id="myButton" type="button" onclick="disable_button()">Click to disable me</button></body></html>
  • 14. XML -DOMXML DOM defines a standard way for accessing andmanipulating XML documents.ORThe XML DOM is a standard for how to get, change, add, ordelete XML elements.
  • 15. XML File<?xml version="1.0"?><bookstore><book category=“web"><title lang="en">Harry</title><author>Aditya</author><year>2010</year><price>2000</price></book></bookstore>
  • 16. Loading of XML file using JavaScript<html><head><script type="text/javascript" src="loadxmldoc.js"></script></head><body><script type="text/javascript">xmlDoc=loadXMLDoc("books.xml");document.write(xmlDoc.documentElement.nodeName);</script></body></html>
  • 17. Advantages of DOM Language and Implementation-Neutral Interface. Important feature of the DOM is to provide a standardprogramming interface that can be used in a wide variety ofenvironments and applications. Interoperability. Benefit of having a standard API is interoperability which is anecessity for documents sent over the Internet.
  • 18. Advantages of DOM (Cont…) HTML and XML Support. DOM is designed with both HTML JavaScript and XML in mind. Style Sheets Support. DOM specifies a way to manipulate and change CSS and XSL stylesheets.
  • 19. Disadvantages Stores the entire document in memory. DOM was written for any language, method naming conventionsdon’t fallow standard java programming conventions.
  • 20. Thank You