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 element have attributes called properties.  Elements can also have methods and events.  We can say that “ everything ” in an HTML document is a object.

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 As A Structure Model DOM Table a11 a12 a21 a22 DOM Table

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

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

13. What's your name?

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.body Document.. documentElement

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.  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 The Dynamic Paragraph I am a dynamic paragraph. Watch me dance! <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';" />

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