Dom

531 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
531
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dom

  1. 1. Document Object Model
  2. 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. 3. Why the DOM?The DOM (Document Object Model) gives you genericaccess to most elements, their styles and attributes in adocument.
  4. 4. DOM ArchitectureDocument object model is aframework that organizes howelements are referenced and howthey interact with each other.
  5. 5. ExampleHow scripts reference elements of a document.How styles are applied to elements.How scripts change styles.
  6. 6. Different Document Objects Document Object Anchor Object Button Object Form Object Image Object Event Object
  7. 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. 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. 9. Document object -Example<html><body bgcolor=“#56ce56”><script type="text/javascript">document.write(“GENIUS");</script></body></html>
  10. 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. 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. 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. 13. Example Cont…<body><button id="myButton" type="button" onclick="disable_button()">Click to disable me</button></body></html>
  14. 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. 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. 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. 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. 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. 19. Disadvantages Stores the entire document in memory. DOM was written for any language, method naming conventionsdon’t fallow standard java programming conventions.
  20. 20. Thank You

×