1 / 26

Document Object Model (DOM)

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.

amanda
Télécharger la présentation

Document Object Model (DOM)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Document Object Model (DOM)

  2. Outline • Introduction of DOM • Overview of DOM • DOM Relationships • Standard DOM

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

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

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

  6. Overview of DOM

  7. Document Is The Collection Of Objects • The DOM presents documents as collection of element as objects. • Every elementhave attributes called properties. • Elements can also have methods and events. • We can say that “everything” in an HTML document is aobject.

  8. 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:

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

  10. DOM Table <TABLE> <TBODY> <TR> <TD>a11</TD> <TD>a12</TD> </TR> <TR> <TD>a21</TD> <TD>a22</TD> </TR> </TBODY> </TABLE> DOM Table DOM As A Structure Model

  11. <invoice> <invoicepage form="00" type="estimatedbill"> <addressee> <addressdata> <name>Anees Ahmad</name> <address> <streetaddress> Street # 1 </streetaddress> <email>aanees_ahmad@yahoo.com </email> </address> </addressdata> </addressee> ... invoice form="00" type="estimatedbill" invoicepage addressee addressdata Document name address Element Anees Ahmad streetaddress email Text NamedNodeMap Street # 1 aanees_ahmad@yahoo.com DOM structure model

  12. Example <script type="text/javascript"> <!-- function sayHello() { var theirname; theirname=document.myform.username.value; if (theirname != "") alert("Hello "+theirname+"!"); else alert("Don't be shy."); } // --> </script>

  13. <body> <form action="#" name="myform" id="myform"> <b>What's your name?</b> <input type="text" name="username" id="username" size="20" /> <input type="button" value="Greet" onclick="sayHello();" /> </form> </body>

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

  15. Document Tree Structure document Document.. documentElement document.body

  16. childs

  17. child, sibling

  18. child, sibling, parent

  19. DOM Relationship

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

  21. 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()

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

  23. Standard DOM

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

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

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

More Related