Document object model
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Document object model

on

  • 350 views

At above

At above

Statistics

Views

Total Views
350
Views on SlideShare
348
Embed Views
2

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 2

http://nikhilbhalla.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Document object model Presentation Transcript

  • 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.  Where the Document Object Model came from?  What is Document Object Model ?
  • 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. 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. 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. 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. DOM Tree The usual parent/child relationship between node Like any other tree, you can walk this [CONTINUED]
  • 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. What is a Node?  Element Node – contains an HTML tag  Text Node – contains text  Text Nodes are contained in Element Nodes [CONTINUED]
  • 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. 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. Putting the all Steps Together EXAMPLE - 01
  • 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. 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. Where on the Node Tree?  childNodes  nodeList = node.childNodes  firstChild  reference = node.firstChild  lastChild  nextSibling  parentNode  previousSibling [CONTINUED]
  • 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. 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. 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. JavaScript with DOM  JavaScript Objects Reference  Browser Objects Reference  Core DOM Objects Reference  HTML DOM Objects Reference EXAMPLE-04
  • 20. CSS With DOM  Dynamically we can add inner Style sheet.  We can also add css class. EXAMPLE-05
  • 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. 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. 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. DOM Standards  W3C www.w3.org/DOM/defines the standards  DOM Level 3 recommendation  www.w3.org/TR/DOM-Level-3-Core/  DOM Level 2 HTML Specification  www.w3.org/TR/DOM-Level-2-HTML/  additional DOM functionality specific to HTML, in particular objects for XHTML elements
  • 25. Email – amit.kumar@above-inc.com With Subject DOM-NTK-Your name.