Uploaded on

This is a seminar presentation

This is a seminar presentation

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,916
On Slideshare
0
From Embeds
0
Number of Embeds
12

Actions

Shares
Downloads
114
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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