DOM Quick Overview
SignureTechnologies
2,128 views
32 slides
Sep 11, 2009
Slide 1 of 32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
About This Presentation
This is a seminar presentation
Slide Content
Signure Technology Pvt Ltd.
www.signure.com
Seminar for DOM – Document Object Model
www.signure.com
Seminar for DOM – Document Object Model
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.
•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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
•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.
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
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
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
•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
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 "Hello world!" text node is the <p> node
<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 "Hello world!" text node is the <p> node
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
"DOM Tutorial"
•The <h1> and <p> nodes are siblings, and both child nodes
of <body>
•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
"DOM Tutorial"
•The <h1> and <p> nodes are siblings, and both child nodes
of <body>
HTML DOM Properties and Methods
•Properties are often referred to as something that is (i.e.
nodename is "p").
•Methods are often referred to as something that is done (i.e.
delete "p").
•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.
•Properties are often referred to as something that is (i.e.
nodename is "p").
•Methods are often referred to as something that is done (i.e.
delete "p").
•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.
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.
•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.
Example
The JavaScript code to get the text from a <p> element with
the id "intro" in a HTML document:
txt=document.getElementById("intro").
childNodes[0].nodeValue
Display:- “Hello DOM!”
•document - the current HTML document
•getElementsById("intro") - the <p> element with the id "intro"
•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.
The JavaScript code to get the text from a <p> element with
the id "intro" in a HTML document:
txt=document.getElementById("intro").
childNodes[0].nodeValue
Display:- “Hello DOM!”
•document - the current HTML document
•getElementsById("intro") - the <p> element with the id "intro"
•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.
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 )
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 )
The getElementById() Method
getElementById();
method returns the element with the specified ID
Syntax
node.getElementById("someID");
Example
document.getElementsById(“intro");
Note: The getElementById() method doesn't work in XML.
getElementById();
method returns the element with the specified ID
Syntax
node.getElementById("someID");
Example
document.getElementsById(“intro");
Note: The getElementById() method doesn't work in XML.
The getElementsByTagName() Method
getElementsByTagName();
returns all elements with a specified tag name.
Syntax
node.getElementsByTagName( "tagname");
Example
document.getElementsByTagName("p");
getElementsByTagName();
returns all elements with a specified tag name.
Syntax
node.getElementsByTagName( "tagname");
Example
document.getElementsByTagName("p");
Example – getElementsByTagName()
•<html>
•<body>
•<p id="intro">example</p>
•<div id="main">
<p id="main1"><font>The DOM is very useful</font></p>
<p id="main2">This example demonstrates how to use the
<b>getElementsByTagName</b> method</p>
•</div>
•<script type="text/javascript">
•x=document.getElementsByTagName("p");
•document.write("First paragraph text: " +
x[0].childNodes[0].nodeValue);
•</script>
•</body>
•<html>
•<body>
•<p id="intro">example</p>
•<div id="main">
<p id="main1"><font>The DOM is very useful</font></p>
<p id="main2">This example demonstrates how to use the
<b>getElementsByTagName</b> method</p>
•</div>
•<script type="text/javascript">
•x=document.getElementsByTagName("p");
•document.write("First paragraph text: " +
x[0].childNodes[0].nodeValue);
•</script>
•</body>
getElementsByTagName()
example returns a nodeList of all <p> elements that are
descendants of the element with id="main":
document.getElementById('main').getElementsByTagName("p");
example returns a nodeList of all <p> elements that are
descendants of the element with id="main":
document.getElementById('main').getElementsByTagName("p");
getElementsByTagName()
<html>
<body>
<p id="intro">W3Schools example</p>
<div id="main">
<p id="main1">The DOM is very useful</p>
<p id="main2">This example demonstrates how to use the
<b>getElementsByTagName</b> method</p>
</div>
<script type="text/javascript">
x=document.getElementById("main").getElementsByTagName("p");
document.write("First paragraph inside the main div: " +
x[0].childNodes[0].nodeValue);
</script>
</body>
</html>
<html>
<body>
<p id="intro">W3Schools example</p>
<div id="main">
<p id="main1">The DOM is very useful</p>
<p id="main2">This example demonstrates how to use the
<b>getElementsByTagName</b> method</p>
</div>
<script type="text/javascript">
x=document.getElementById("main").getElementsByTagName("p");
document.write("First paragraph inside the main div: " +
x[0].childNodes[0].nodeValue);
</script>
</body>
</html>
DOM Node List Length
x=document.getElementsByTagName("p");
for(i=0;i<x.length;i++){
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}
x=document.getElementsByTagName("p");
for(i=0;i<x.length;i++){
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}
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="intro">W3Schools example</p>
<div id="main">
<p id="main1">The DOM is very useful</p>
<p id="main2">This example demonstrates
<b>node Relationships</b>
</p>
</div>
</body>
</html>
•The three properties parentNode, firstChild, and lastChild follow the
document structure and allow short-distance travel in the
document.
<html>
<body>
<p id="intro">W3Schools example</p>
<div id="main">
<p id="main1">The DOM is very useful</p>
<p id="main2">This example demonstrates
<b>node Relationships</b>
</p>
</div>
</body>
</html>
Navigating Node Relationships
•the <p id="intro"> 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("intro");
var text=x.firstChild.nodeValue;
•the <p id="intro"> 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("intro");
var text=x.firstChild.nodeValue;
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.
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.
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.
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.
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();
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();
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.
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.
Node Property
appendChild(newchild):appendChild(newchild):Appends newChild as the last child Appends newChild as the last child
of this nodeof this node
createTextNode = This property used to create new text node.createTextNode = This property used to create new text node.
e.g. createTextNode(a);e.g. createTextNode(a);
createElement = This property usedt to create element createElement = This property usedt to create element
e.g. createElement('tr');e.g. createElement('tr');
appendChild(newchild):appendChild(newchild):Appends newChild as the last child Appends newChild as the last child
of this nodeof this node
createTextNode = This property used to create new text node.createTextNode = This property used to create new text node.
e.g. createTextNode(a);e.g. createTextNode(a);
createElement = This property usedt to create element createElement = This property usedt to create element
e.g. createElement('tr');e.g. createElement('tr');
Node List
The nodeList object represents a node and its child nodes as a The nodeList object represents a node and its child nodes as a
node tree. node tree.
Property of Nodelist:Property of Nodelist:
length:length:Returns an unsigned long integer indicating the number Returns an unsigned long integer indicating the number
of nodes in the NodeListof nodes in the NodeList..
Method of Nodelist:Method of Nodelist:
item(index):item(index):This method takes an index as its argument and This method takes an index as its argument and
returns the node at that index position.returns the node at that index position.
The nodeList object represents a node and its child nodes as a The nodeList object represents a node and its child nodes as a
node tree. node tree.
Property of Nodelist:Property of Nodelist:
length:length:Returns an unsigned long integer indicating the number Returns an unsigned long integer indicating the number
of nodes in the NodeListof nodes in the NodeList..
Method of Nodelist:Method of Nodelist:
item(index):item(index):This method takes an index as its argument and This method takes an index as its argument and
returns the node at that index position.returns the node at that index position.
Properties of Document:
doctype: doctype: Returns <!DOCTYPE information of document.Returns <!DOCTYPE information of document.
implementation: implementation: Returns implementation node.Returns implementation node.
documentElement: documentElement: Returns root element of the document.Returns root element of the document.
doctype: doctype: Returns <!DOCTYPE information of document.Returns <!DOCTYPE information of document.
implementation: implementation: Returns implementation node.Returns implementation node.
documentElement: documentElement: Returns root element of the document.Returns root element of the document.
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) : Creates an attribute
node with the specified attribute name
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) : Creates an attribute
node with the specified attribute name
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 2,128
- Slides 32
- Favorites 1
- Age 5925 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views