Document object model


Published on

At above

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.