xml and dom

8/14/2019 XML and DOM

1/44

XML 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


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?


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.


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.


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);


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/44

XML DOM object: properties and

method Properties

nodeName

nodeValueparentNode childNodes attributes

Methods getElementsByTagName(name) appendChild(node) removeChild(node)

arrays


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


10/44

]>

Mocha Java11.95

Cappuccino15.00

priceList.xml

To list coffee names in the browser


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


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


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


14/44

Changing the value of an element//get xmldocx=xmldoc.documentElement.childNodes;for (i=0;i


15/44

Other properties useful for

navigationparentNode

nextSibling

firstChild

Write code to get the price of the coffee name entered in theform text box.


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");


17/44

function find(){coffees=xmldoc.documentElement.childNodes;for(i=0;i


18/44

Working with attributes

Powerful lessons in personal change

Turning mistakes into stepping stones forsuccess

Getting book titles ..


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


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


21/44


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')+"
");


23/44

Creating and adding nodes

createElement(elementName)

createTextNode(elementName)

createComment(text) createCDATASection(text)

Inserting a new coffee node


24/44

Adding, replacing nodes

appendChild(node)

replaceChild(newNode,oldNode)

insertBefore(newNode,oldNode) insertData(offset, string)


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");


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


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')+"
");


28/44

root=xmldoc.documentElement;root.appendChild(newNode);

coffees=xmldoc.documentElement.childNodes;for(i=0;i


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.


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.


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.


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


33/44

Example to bind external XML to

table tag

NilakandanNarayanan

23/6/198020000

MohanMadan3/8/198225000


34/44

Data bindingExample

FName LnameDate of birth Salary


35/44

Other data binding examples

Visa

In the same and password can also be configured


36/44

MasterCard

Visa


37/44


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();

}}


39/44

FirstName

LastName

Date of birth

Salary


40/44


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


42/44

First NameLast NameTelephoneEmail


43/44


44/44

Data Binding Architecture

ARCHITECTURE DIAGRAM FROM MSDN

xml and dom

Documents