DOM Quick Overview


Published on

This is a seminar presentation

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

DOM Quick Overview

  1. 1. Signure Technology Pvt Ltd. Seminar for DOM – Document Object Model
  2. 2. HTML DOM <ul><li>The HTML DOM defines a standard way for accessing and manipulating HTML documents. </li></ul><ul><li>The HTML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript. </li></ul>
  3. 3. Tree-Structure (a node tree), with elements, attributes, and text. <ul><ul><li>Every HTML tag is a node within this tree , with subnodes & parent nodes. </li></ul></ul><ul><li>Also every text portion is its own DOM node. </li></ul>
  4. 4. HTML DOM Introduction What is the DOM? &quot;The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.&quot; The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.
  5. 5. DOM <ul><li>The DOM is separated into 3 different parts / levels: </li></ul><ul><ul><li>Core DOM - standard model for any structured document </li></ul></ul><ul><ul><li>XML DOM - standard model for XML documents </li></ul></ul><ul><ul><li>HTML DOM - standard model for HTML documents </li></ul></ul><ul><ul><li>Warning : - The DOM is accessible only when the whole document has been loaded.That’s the reason the DOM access code is executed only after the load event has been fired. </li></ul></ul>
  6. 6. Features of DOM <ul><ul><li>A standard object model for HTML </li></ul></ul><ul><ul><li>A standard programming interface for HTML </li></ul></ul><ul><ul><li>Platform- and language-independent </li></ul></ul><ul><ul><li>A W3C standard. </li></ul></ul><ul><ul><li>The HTML DOM is a standard for how to get, change, add, or delete HTML elements. </li></ul></ul><ul><ul><li>The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them. </li></ul></ul>
  7. 7. HTML DOM Nodes <ul><ul><li>The entire document is a document node </li></ul></ul><ul><ul><li>Every HTML tag is an element node </li></ul></ul><ul><ul><li>The text in the HTML elements are text nodes </li></ul></ul><ul><ul><li>Every HTML attribute is an attribute node </li></ul></ul><ul><ul><li>Comments are comment nodes </li></ul></ul>According to the DOM, everything in an HTML document is a node.
  8. 8. SAX Classes and Interfaces <ul><li>Parser related classes :- </li></ul><ul><li>javax.xml.parsers </li></ul><ul><ul><li>-javax.xml.parsers.SAXParserFactory </li></ul></ul><ul><ul><li>-javax.xml.parsers.SAXParser </li></ul></ul><ul><li>Parser related Exception classes :- </li></ul><ul><li>ParserConfigurationException </li></ul><ul><li>A ParserConfigurationException signals that a factory is unable to load and instantiate a parser class. </li></ul><ul><li>FactoryConfigurationError </li></ul><ul><li>A FactoryConfigurationError signals that Java is unable to load and instantiate the concrete factory class. </li></ul>
  9. 9. HTML DOM Node Tree (Document Tree) All the nodes in a node tree have relationships to each other. The tree structure is called a node-tree. Node:- Parents, Children, and Siblings
  10. 10. HTML DOM Node Tree (Document Tree) <ul><li>In a node tree, the top node is called the root </li></ul><ul><li>Every node, except the root, has exactly one parent node </li></ul><ul><li>A node can have any number of children </li></ul><ul><li>A leaf is a node with no children </li></ul><ul><li>Siblings are nodes with the same parent </li></ul>
  11. 11. DOM <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>DOM</title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>I am in DOM world</h1> </li></ul><ul><li><p id=“intro”>Hello DOM!</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>The <html> node has no parent node; the root node </li></ul><ul><li>The parent node of the <head> and <body> nodes is the <html> node </li></ul><ul><li>The parent node of the &quot;Hello world!&quot; text node is the <p> node </li></ul>
  12. 12. DOM <ul><li>Most element nodes have child nodes: </li></ul><ul><li>The <html> node has two child nodes; <head> and <body> </li></ul><ul><li>The <head> node has one child node; the <title> node </li></ul><ul><li>The <title> node also has one child node; the text node &quot;DOM Tutorial&quot; </li></ul><ul><li>The <h1> and <p> nodes are siblings, and both child nodes of <body> </li></ul>
  13. 13. HTML DOM Properties and Methods <ul><li>Properties are often referred to as something that is (i.e. nodename is &quot;p&quot;). </li></ul><ul><li>Methods are often referred to as something that is done (i.e. delete &quot;p&quot;). </li></ul><ul><li>XML DOM Properties </li></ul><ul><ul><li>These are some typical DOM properties: </li></ul></ul><ul><ul><li>x.nodeName - the name of x </li></ul></ul><ul><ul><li>x.nodeValue - the value of x </li></ul></ul><ul><ul><li>x.parentNode - the parent node of x </li></ul></ul><ul><ul><li>x.childNodes - the child nodes of x </li></ul></ul><ul><ul><li>x.attributes - the attributes nodes of x </li></ul></ul><ul><li>Note: In the list above, x is a node object. </li></ul>
  14. 14. XML DOM Methods <ul><li>x.getElementByID( id ) - get the element with a specified id </li></ul><ul><li>x.getElementsByTagName( name ) - get all elements with a specified tag name </li></ul><ul><li>x.appendChild( node ) - insert a child node to x </li></ul><ul><li>x.removeChild( node ) - remove a child node from x </li></ul><ul><li>Note: In the list above, x is a node object. </li></ul>
  15. 15. Example <ul><li>The JavaScript code to get the text from a <p> element with the id &quot;intro&quot; in a HTML document: </li></ul><ul><li>txt=document.getElementById(&quot;intro&quot;). </li></ul><ul><li>childNodes[0].nodeValue </li></ul><ul><li>Display:- “ Hello DOM!” </li></ul><ul><li>document - the current HTML document </li></ul><ul><li>getElementsById(&quot;intro&quot;) - the <p> element with the id &quot;intro&quot; </li></ul><ul><li>childNodes[0] - the first child of the <p> element (the text node) </li></ul><ul><li>nodeValue - the value of the node (the text itself) </li></ul><ul><li>getElementsById is a method, while childNodes and nodeValue are properties. </li></ul>
  16. 16. HTML DOM Access Nodes <ul><li>Accessing Nodes </li></ul><ul><ul><li>You can access a node in three ways: </li></ul></ul><ul><ul><li>1. By using the getElementById() method </li></ul></ul><ul><ul><li>2. By using the getElementsByTagName() method </li></ul></ul><ul><ul><li>3. By navigating the node tree, using the node relationships ) </li></ul></ul>
  17. 17. The getElementById() Method <ul><li>getElementById(); </li></ul><ul><li> method returns the element with the specified ID </li></ul><ul><li>Syntax </li></ul><ul><li>node.getElementById(&quot;someID&quot;); </li></ul><ul><li>Example </li></ul><ul><li>document.getElementsById(“intro&quot;); </li></ul><ul><li>Note: The getElementById() method doesn't work in XML. </li></ul>
  18. 18. The getElementsByTagName() Method <ul><li>getElementsByTagName(); </li></ul><ul><li> returns all elements with a specified tag name. </li></ul><ul><li>Syntax </li></ul><ul><li>node .getElementsByTagName( &quot;tagname&quot; ); </li></ul><ul><li>Example </li></ul><ul><li>document.getElementsByTagName(&quot;p&quot;); </li></ul>
  19. 19. Example – getElementsByTagName() <ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;intro&quot;>example</p> </li></ul><ul><li><div id=&quot;main&quot;> </li></ul><ul><ul><li><p id=&quot;main1&quot;><font>The DOM is very useful</font></p> </li></ul></ul><ul><ul><li><p id=&quot;main2&quot;>This example demonstrates how to use the <b>getElementsByTagName</b> method</p> </li></ul></ul><ul><li></div> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>x=document.getElementsByTagName(&quot;p&quot;); </li></ul><ul><li>document.write(&quot;First paragraph text: &quot; + x[0].childNodes[0].nodeValue); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul>
  20. 20. getElementsByTagName() <ul><li>example returns a nodeList of all <p> elements that are descendants of the element with id=&quot;main&quot;: </li></ul><ul><li>document.getElementById('main').getElementsByTagName(&quot;p&quot;); </li></ul>
  21. 21. getElementsByTagName() <html> <body> <p id=&quot;intro&quot;>W3Schools example</p> <div id=&quot;main&quot;> <p id=&quot;main1&quot;>The DOM is very useful</p> <p id=&quot;main2&quot;>This example demonstrates how to use the <b>getElementsByTagName</b> method</p> </div> <script type=&quot;text/javascript&quot;> x=document.getElementById(&quot;main&quot;).getElementsByTagName(&quot;p&quot;); document.write(&quot;First paragraph inside the main div: &quot; + x[0].childNodes[0].nodeValue); </script> </body> </html>
  22. 22. DOM Node List Length <ul><li>x=document.getElementsByTagName(&quot;p&quot;); </li></ul><ul><li>for(i=0;i<x.length;i++){ document.write(x[i].childNodes[0].nodeValue); document.write(&quot;<br />&quot;); </li></ul><ul><li>} </li></ul>
  23. 23. Navigating Node Relationships <ul><li>The three properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document. </li></ul><ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><p id=&quot;intro&quot;>W3Schools example</p> </li></ul><ul><li><div id=&quot;main&quot;> </li></ul><ul><li><p id=&quot;main1&quot;>The DOM is very useful</p> </li></ul><ul><li><p id=&quot;main2&quot;>This example demonstrates <b>node Relationships</b> </li></ul><ul><li></p> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  24. 24. Navigating Node Relationships <ul><li>the <p id=&quot;intro&quot;> is the first child node (firstChild) of the <body> element, and the <div> element is the last child node (lastChild) of the <body> element. </li></ul><ul><li>Furthermore, the <body> is the parent (parentNode) . </li></ul><ul><li>The firstChild property can be used to access the text of an element. </li></ul><ul><li>x=document.getElementById(&quot;intro&quot;); var text=x.firstChild.nodeValue; </li></ul>
  25. 25. Root Nodes <ul><li>There are two special document properties that allow access to the tags: </li></ul><ul><ul><li>document.documentElement </li></ul></ul><ul><ul><li>document.body </li></ul></ul><ul><li>The first property returns the root node of the document and exists in all XML and HTML documents. </li></ul><ul><li>The second property is a special addition for HTML pages, and gives direct access to the <body> tag. </li></ul>
  26. 26. Node Property Everything in a document can be considered a node, including the document itself. Properties Of Node Interface: • nodeName : Returns name of element. • nodeValue: Returns value of element. • nodeType :Returns type of node whether element or document etc. • parentNode: Contains the parent node (for nodes that can have parents). • childNodes: Contains a node list containing the children (for nodes that can have children). • firstChild : Contains the first child of this node.
  27. 27. Node Property <ul><li>Properties Of Node Interface: </li></ul><ul><li>lastChild: Returns the last child node. </li></ul><ul><li>previousSibling: Contains the left sibling of this node </li></ul><ul><li>nextSibling: Contains the next sibling of this node in the parent's child list. </li></ul><ul><li>attributes: Contains the list of attributes for this node. </li></ul><ul><li>getAttributes(); </li></ul><ul><li>setAttributes(); </li></ul>
  28. 28. Node Property <ul><li>Methods Of Node Interface: </li></ul><ul><li>insertBefore(newchild,refchild): Inserts a child node to the left of the specified node or at the end of the list. </li></ul><ul><li>replaceChild(newchild,oldchild): Replaces the specified old child node with the supplied new child node in the set of children of this node, and returns the old child node. </li></ul><ul><li>removeChild(oldchild): Removes the specified child node from the list of children and returns it. </li></ul>
  29. 29. Node Property appendChild(newchild): Appends newChild as the last child of this node createTextNode = This property used to create new text node. e.g. createTextNode(a); createElement = This property usedt to create element e.g. createElement('tr');
  30. 30. Node List The nodeList object represents a node and its child nodes as a node tree. Property of Nodelist: length: Returns an unsigned long integer indicating the number of nodes in the NodeList . Method of Nodelist: item(index): This method takes an index as its argument and returns the node at that index position.
  31. 31. Properties of Document: doctype: Returns <!DOCTYPE information of document. implementation: Returns implementation node. documentElement: Returns root element of the document.
  32. 32. Methods of DOM <ul><li>Methods Of Document Interface: </li></ul><ul><li>createElement(tagName) : Creates an new </li></ul><ul><li> element with the specified tagName </li></ul><ul><li>createTextNode(text) : Creates a text node, containing the specified text . </li></ul><ul><li>createAttribute(attributeName) : C reates an attribute node with the specified attribute name </li></ul>