Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Document object model


Published on

At above

Published in: Technology
  • Be the first to comment

Document object model

  1. 1. Agenda  Evaluation.  Benefits of DOM.  DOM Structure and implements.  XML With DOM.  HTML With DOM.  JavaScript with DOM.  CSS with DOM.  Q&A
  2. 2.  Where the Document Object Model came from?  What is Document Object Model ?
  3. 3. Where the Document Object Model came from?  "browser wars" of the late 1990s between Netscape Navigator and Microsoft Internet Explorer.  1996 within Netscape Navigator 2.0 “DOM Level 0" or "Legacy DOM”  W3C in late 1998 - > 2000 itro.. DOM Level 1 and 2.  2005, large parts of W3C DOM were well-supported by common ECMAScript-enabled browsers
  4. 4. What is Document Object Model ? Document Object Model (DOM), a programming interface specification being developed by the World Wide Web Consortium (W3C), lets a programmer create and modify HTML pages and XML documents as full-fledged program objects. In short..  set of objects/elements  a structure of how these objects/elements can be combined  and an interface to access and modify them
  5. 5. Benefits of DOM.  Read the entire document  Represents result as a tree  Lets you search tree  Lets you modify tree  Good for reading data/configuration files  Support in many different languages.
  6. 6. DOM Structure and implements  Objects are in a hierarchy  The window is the parent for a given web page.  Document is the child with the objects that are most commonly manipulated [CONTINUED]
  7. 7. DOM Tree The usual parent/child relationship between node Like any other tree, you can walk this [CONTINUED]
  8. 8. Referencing Objects  By their id or name (this is the easiest way, but you need to make sure a name is unique in the hierarchy)  by their numerical position in the hierarchy, by walking the array that contains them  by their relation to parent, child, or sibling (parentNode, previousSibling, nextSibling, firstChild, lastChild or the childNodes array
  9. 9. What is a Node?  Element Node – contains an HTML tag  Text Node – contains text  Text Nodes are contained in Element Nodes [CONTINUED]
  10. 10. Nodes Organise the Page html head title text “my page” body p text “This is text on my page” <html> <head> <title>My page</title> </head> <body> <p>This is text on my page</p> </body> </html> [CONTINUED]
  11. 11. Adding Some Text To A Page  Create a new Element [document.createElement(“p”)]  Create a Text Node [document.createTextNode(“Some text.”) ]  Attach the New Text Node to the New Element [newNode.appendChild(newText)]  Find an Existing Element [document.getElementById(“thisLocation”)]  Append the New Element to the Existing Element [docElement.appendChild(newNode)] [CONTINUED]
  12. 12. Putting the all Steps Together EXAMPLE - 01
  13. 13. Remove a Node “To remove a node, we use the element method removeChild (name of node to be removed)” function remText(location) { var docElement; docElement = document.getElementById(location); docElement.removeChild(docElement.lastChild); } [CONTINUED]
  14. 14. Best way to the get Element  getElementById() allows you to work with elements by their individual id but often you will want to work with a group of elements  getElementsByTagName() allows you to work with groups of elements. This method returns an array [CONTINUED]
  15. 15. Where on the Node Tree?  childNodes  nodeList = node.childNodes  firstChild  reference = node.firstChild  lastChild  nextSibling  parentNode  previousSibling [CONTINUED]
  16. 16. Attribute Nodes  We can get at the attributes of an element through attribute nodes  Attribute nodes, like text nodes are always contained in element nodes  We shall look at methods:  getAttribute()  setAttribute() function dispAttribs() { var messg; attribs = new Array; attribs = document.getElementsByTagName("p"); for (i = 0; i < attribs.length; i++) { messg = attribs[i].getAttribute("className"); alert(messg); } } function chngAttribs() { var messg; attribs = new Array; attribs = document.getElementsByTagName("p"); for (i = 0; i < attribs.length; i++) { attribs[i].setAttribute("className","jazz"); } } [CONTINUED]
  17. 17. XML With DOM  EXtensible Markup Language (XML) is a meta-language that describes the content of the document (self-describing data).  XML does not specify the tag set or grammar of the language  Media for data interchange  XML only has container tags <blah>...</blah> or <blah/> EXAMPLE-02
  18. 18. HTML With DOM  We can track any tag with respect its name and global attribute.  Use to arrange the XML data in UI.  Give Action through the event Handler.  Add and modified the tag with data. [CONTINUED] EXAMPLE-03
  19. 19. JavaScript with DOM  JavaScript Objects Reference  Browser Objects Reference  Core DOM Objects Reference  HTML DOM Objects Reference EXAMPLE-04
  20. 20. CSS With DOM  Dynamically we can add inner Style sheet.  We can also add css class. EXAMPLE-05
  21. 21. All the HTML in the tag is replaced when the innerHTML method is used innerHTML is not part of the DOM – so it may one day disappear – though it is universally recognised by browsers Tags within the innerHTML are not part of the DOM tree so they cannot be manipulated Points to know. [CONTINUED]
  22. 22. Points to know.  Understand the nature and structure of the DOM  Add and remove content from the page  Access and change element attributes – including source and class  Insert markup into a page using innerHTML  Change style attribute using Javascript
  23. 23. Points to know  DOM makes all components of a web page accessible  HTML elements  their attributes  text  They can be created, modified and removed with JavaScript
  24. 24. DOM Standards  W3C the standards  DOM Level 3 recommendation   DOM Level 2 HTML Specification   additional DOM functionality specific to HTML, in particular objects for XHTML elements
  25. 25. Email – With Subject DOM-NTK-Your name.