8/14/2019 XML and DOM
1/44
XML DOM
8/14/2019 XML and DOM
2/44
DOM DOM : Document Object Model.
Provides a standard way to access XML and
HTML types of document.
The W3C Document Object Model (DOM) is
a platform and language-neutral interface that
allows programs and scripts to dynamicallyaccess and update the content, structure, and
style of a document."
DOM definition according to W3C
We have already seen this while doing java script
8/14/2019 XML and DOM
3/44
XML DOM
Provides a standard programming interface toaccess, add, modify and delete the components
of a XML document.
So what are the components of an XML document?
8/14/2019 XML and DOM
4/44
Parsing XML
Most modern browsers have a build-in XML
parser which reads XML into memory and
converts it into an XML DOM object.
This can then be accesses in JavaScript code.
Microsoft IE uses a set of ActiveX object to work
with XML document.
Other browsers like Firefox, Mozilla and Opera
use generic set of objects.
8/14/2019 XML and DOM
5/44
Loading XML document
Microsoft wayxmldoc=new
ActiveXObject("Microsoft.XMLDOM");xmldoc.async="false";xmldoc.load("books.xml");
Other browser way
xmldoc=
document.implementation.
createDocument("","",null);
xmldoc.async="false";xmldoc.load("books.xml");
asynchronized loading if true parser will continue
execution of the script before the document is fully loaded.
8/14/2019 XML and DOM
6/44
Write a generic code to load an
XML document Hint: the IE browser will throw an error when
it bump into this statement.
document.implementation.createDocument("","",null);
8/14/2019 XML and DOM
7/44
try {
xmldoc=new ActiveXObject("Microsoft.XMLDOM");}
catch(e){ xmldoc=document.implementation.createDocu
ment("","",null);}xmldoc.async=false;xmldoc.load("priceList.xml");document.write("loaded xml document");
Thank god methods are same!
8/14/2019 XML and DOM
8/44
XML DOM object: properties and
method Properties
nodeName
nodeValueparentNode childNodes attributes
Methods getElementsByTagName(name) appendChild(node) removeChild(node)
arrays
8/14/2019 XML and DOM
9/44
Navigating through XML
Every component in an XML is a nodeelement node, attribute node, text node,comment node.
To get text value within an element in an xmldocument
First we need to get to that elementy=xmlDoc.getElementsByTagName("title")[index]
And then get to the text node and get itsvaluey.childNodes[0].nodeValue
8/14/2019 XML and DOM
10/44
]>
Mocha Java11.95
Cappuccino15.00
priceList.xml
To list coffee names in the browser
8/14/2019 XML and DOM
11/44
try {
xmldoc=newActiveXObject("Microsoft.XMLDOM");}
catch(e){ xmldoc=document.implementation.createDocu
ment("","",null); }xmldoc.async=false;xmldoc.load("priceList.xml");
y=xmldoc.getElementsByTagName("name");for(i=0;i
8/14/2019 XML and DOM
12/44
Node Properties
nodeName
Returns the tag/ attribute/text/document name.It is
readonly.
nodeValue Returns the attribute value for attribute and text for
the text node. It is not defined for the tag/element
node.
nodeTypeElement1, Attribute2, Text 3,Comment8, Document9
8/14/2019 XML and DOM
13/44
Display tags/elementstry {
xmldoc=new ActiveXObject("Microsoft.XMLDOM");}catch(e){ xmldoc=document.implementation.createDocument("","",null);}
xmldoc.async=false;
xmldoc.load("priceList.xml");
x=xmldoc.documentElement.childNodes;for (i=0;i
8/14/2019 XML and DOM
14/44
Changing the value of an element//get xmldocx=xmldoc.documentElement.childNodes;for (i=0;i
8/14/2019 XML and DOM
15/44
Other properties useful for
navigationparentNode
nextSibling
firstChild
Write code to get the price of the coffee name entered in theform text box.
8/14/2019 XML and DOM
16/44
coffee name
try {
xmldoc=new ActiveXObject("Microsoft.XMLDOM");}catch(e){ xmldoc=document.implementation.createDocum
ent("","",null);}xmldoc.async=false;xmldoc.load("priceList.xml");
8/14/2019 XML and DOM
17/44
function find(){coffees=xmldoc.documentElement.childNodes;for(i=0;i
8/14/2019 XML and DOM
18/44
Working with attributes
Powerful lessons in personal change
Turning mistakes into stepping stones forsuccess
Getting book titles ..
8/14/2019 XML and DOM
19/44
try { xmldoc=new ActiveXObject("Microsoft.XMLDOM"); }catch(e) {
xmldoc=document.implementation.createDocument("","",null);}xmldoc.async=false;xmldoc.load("bookreview.xml");
x=xmldoc.getElementsByTagName('review');for(i=0;i
8/14/2019 XML and DOM
20/44
Remove an element removeChild()
//code to get xmldocxmldoc.load("bookreview.xml");
document.write("Number of review b4 remove:"+xmldoc.getElementsByTagName("review").l
ength);document.write("
");x=xmldoc.getElementsByTagName("review")[0]
x.parentNode.removeChild(x);document.write("Number of review afterremove:"+xmldoc.getElementsByTagName("review").length);
document.write("
"); Get to parent then remove child
8/14/2019 XML and DOM
21/44
8/14/2019 XML and DOM
22/44
Remove an attribute
removeAttribute(name)
//code to get xmldoc
xmldoc.load("bookreview.xml");x=xmldoc.getElementsByTagName('review');
document.write(x[0].getAttribute('libno')+"
");
x[0].removeAttribute('libno');document.write(x[0].getAttribute('libno')+"
");
8/14/2019 XML and DOM
23/44
Creating and adding nodes
createElement(elementName)
createTextNode(elementName)
createComment(text) createCDATASection(text)
Inserting a new coffee node
8/14/2019 XML and DOM
24/44
Adding, replacing nodes
appendChild(node)
replaceChild(newNode,oldNode)
insertBefore(newNode,oldNode) insertData(offset, string)
8/14/2019 XML and DOM
25/44
coffee name
coffee price
try {xmldoc=new
ActiveXObject("Microsoft.XMLDOM"); }catch(e){
xmldoc=document.implementation.createDocument("","",null);}xmldoc.async=false;
xmldoc.load("priceList.xml");
8/14/2019 XML and DOM
26/44
function insert(){nm=document.forms[0].cname.value;
pr=document.forms[0].price.value;
newNode=xmldoc.createElement("coffee");
newName=xmldoc.createElement("name");
newNText=xmldoc.createTextNode(nm);newName.appendChild(newNText);newNText.insertData(0, "NEW ")
newPrice=xmldoc.createElement("price");
newPText=xmldoc.createTextNode(pr);newPrice.appendChild(newPText);
newNode.appendChild(newName);
newNode.appendChild(newPrice);
Creating
coffee
node and
adding
name and
price
nodes to it
8/14/2019 XML and DOM
27/44
Creating and adding attributes
createAttribute(attributeName)
Example:
//code to get xmldoc
newatt=xmldoc.createAttribute("libno");newatt.nodeValue="lib2";
x=xmldoc.getElementsByTagName('review')[2];
document.write("b4 setting "+x.getAttribute('libno')+"
");x.setAttributeNode(newatt);document.write("after
setting"+x.getAttribute('libno')+"
");
8/14/2019 XML and DOM
28/44
root=xmldoc.documentElement;root.appendChild(newNode);
coffees=xmldoc.documentElement.childNodes;for(i=0;i
8/14/2019 XML and DOM
29/44
Data Binding
Data binding refers to mapping of data from a
data source which in on the server to the
client so that it reduces client-servercommunication.
After the data binding happens the data can
be viewed on the local system in various
forms sorted, filtered etc without having tosend a special request to the server.
8/14/2019 XML and DOM
30/44
XML and Data Binding
Although the Data Source on the server
may be a text file, xml document or
complex RDBMS, XML is most oftenused for data binding on the client side.
An advantage of using XML to store
data is it is cross-platform.
8/14/2019 XML and DOM
31/44
Data Islands
XML data binding requires attaching a web page to aset of records in XML, called a data island.
XML data can be either internal to the html documentor external.
8/14/2019 XML and DOM
32/44
Binding XML and HTML tag
Attributes defined in HTML 4.0 are used to bind
XML data to html tags
datasrc
datafld
Generic format
Note that all HTML tags do not support data
binding
8/14/2019 XML and DOM
33/44
Example to bind external XML to
table tag
NilakandanNarayanan
23/6/198020000
MohanMadan3/8/198225000
8/14/2019 XML and DOM
34/44
Data bindingExample
FName LnameDate of birth Salary
8/14/2019 XML and DOM
35/44
Other data binding examples
Visa
In the same and password can also be configured
8/14/2019 XML and DOM
36/44
MasterCard
Visa
8/14/2019 XML and DOM
37/44
8/14/2019 XML and DOM
38/44
Data binding Examplefunction moveNext(){
dsoEmp.recordset.MoveNext();if(dsoEmp.recordset.eof){
dsoEmp.recordset.MoveFirst();}
}function movePrevious(){
dsoEmp.recordset.MovePrevious();if(dsoEmp.recordset.bof) {dsoEmp.recordset.MoveLast();
}}
8/14/2019 XML and DOM
39/44
FirstName
LastName
Date of birth
Salary
8/14/2019 XML and DOM
40/44
8/14/2019 XML and DOM
41/44
TDC
Tabular Data Control The TDC is a simple DSO that provides access to
delimited text files. For example consider the file given below
FirstName:string,LastName:string,Email:string,Telephone:string
Bindu,R,[email protected],9723654895Bert,S,[email protected],99723654896
Emma,C,[email protected],996365487Will,Gantry,[email protected],9882365488Shaan,Miller,[email protected],98882365490Roger,Ecma,[email protected],99882365491
Emp.csv
8/14/2019 XML and DOM
42/44
First NameLast NameTelephoneEmail
8/14/2019 XML and DOM
43/44
8/14/2019 XML and DOM
44/44
Data Binding Architecture
ARCHITECTURE DIAGRAM FROM MSDN