dom presentation

8/2/2019 DOM Presentation

1/23

DOM


2/23

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents like XML and HTML:

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

The DOM defines the objects and properties of all document elements,and the methods (interface) to access them.


3/23

The XML DOM defines a standard way for accessing and manipulating XML documents.

The DOM presents an XML document as a tree-structure.

everything in an XML document is a node.

The DOM says:

The entire document is a document node

Every XML element is an element node

The text in the XML elements are text nodes

Every attribute is an attribute node

Comments are comment nodes

Everyday Italian

Giada De Laurentiis

2005

30.00


4/23

Node Properties

In the XML DOM, each node is an object.

Objects have methods and properties, that can be accessed and

manipulated by JavaScript. Three important node properties are:

nodeName

nodeValue

nodeType

X=Doc.getElementsByTagName("title");txt=x.nodeValue;

Node type:

Node type NodeType

Element 1

Attribute 2

Text 3

Comment 8

Document 9


5/23

Node Types

The following table lists the different W3C node types, and which node types theymay have as children:

Node type Description

Document :9 represent entire document DocumentFragment :11 Represents a "lightweight" Document

object, which can hold a portion of adocument

DocumentType :10 Provides an interface to the entities defined forthe document

ProcessingInstruction :7 Represents a processing instruction

EntityReference :5 Represents an entity reference

Element :1 Represents an element

Attr :2 Represents an attribute

Text :3 Represents textual content

CDATASection :4 Represents a CDATA section in a document

Comment :8 Represents a comment

Entity :6 Represents an entity

Notation :12 Represents a notation declared in the DTD None


6/23

childNodes insertBefore()

firstChild isEqualNode()

lastChild removeChild()

nextSibling replaceChild()nodeName length

nodeType item()

nodeValue getNamedItem()

parentNode removeNamedItem()

Prefix createElement()

previousSibling createTextNode()

textContent getElementsByTagName()

Text renameNode()

appendChild() appendData()cloneNode() deleteData()

hasAttributes() insertData()

hasChildNodes() replaceData()
http://www.w3schools.com/dom/prop_node_childnodes.asphttp://www.w3schools.com/dom/met_node_insertbefore.asphttp://www.w3schools.com/dom/prop_node_firstchild.asphttp://www.w3schools.com/dom/met_node_isequalnode.asphttp://www.w3schools.com/dom/prop_node_lastchild.asphttp://www.w3schools.com/dom/met_node_removechild.asphttp://www.w3schools.com/dom/prop_node_nextsibling.asphttp://www.w3schools.com/dom/met_node_replacechild.asphttp://www.w3schools.com/dom/prop_node_nodename.asphttp://www.w3schools.com/dom/prop_nodelist_length.asphttp://www.w3schools.com/dom/prop_node_nodetype.asphttp://www.w3schools.com/dom/met_nodelist_item.asphttp://www.w3schools.com/dom/prop_node_nodevalue.asphttp://www.w3schools.com/dom/met_nodemap_getnameditem.asphttp://www.w3schools.com/dom/prop_node_parentnode.asphttp://www.w3schools.com/dom/met_nodemap_removenameditem.asphttp://www.w3schools.com/dom/prop_node_prefix.asphttp://www.w3schools.com/dom/met_document_createelement.asphttp://www.w3schools.com/dom/prop_node_previoussibling.asphttp://www.w3schools.com/dom/met_document_createtextnode.asphttp://www.w3schools.com/dom/prop_node_textcontent.asphttp://www.w3schools.com/dom/met_document_getelementsbytagname.asphttp://www.w3schools.com/dom/prop_node_text.asphttp://www.w3schools.com/dom/met_document_renamenode.asphttp://www.w3schools.com/dom/met_node_appendchild.asphttp://www.w3schools.com/dom/met_cdata_appenddata.asphttp://www.w3schools.com/dom/met_node_clonenode.asphttp://www.w3schools.com/dom/met_cdata_deletedata.asphttp://www.w3schools.com/dom/met_node_hasattributes.asphttp://www.w3schools.com/dom/met_cdata_insertdata.asphttp://www.w3schools.com/dom/met_node_haschildnodes.asphttp://www.w3schools.com/dom/met_cdata_replacedata.asphttp://www.w3schools.com/dom/met_cdata_replacedata.asphttp://www.w3schools.com/dom/met_cdata_replacedata.asphttp://www.w3schools.com/dom/met_node_haschildnodes.asphttp://www.w3schools.com/dom/met_node_haschildnodes.asphttp://www.w3schools.com/dom/met_cdata_insertdata.asphttp://www.w3schools.com/dom/met_cdata_insertdata.asphttp://www.w3schools.com/dom/met_node_hasattributes.asphttp://www.w3schools.com/dom/met_node_hasattributes.asphttp://www.w3schools.com/dom/met_cdata_deletedata.asphttp://www.w3schools.com/dom/met_cdata_deletedata.asphttp://www.w3schools.com/dom/met_node_clonenode.asphttp://www.w3schools.com/dom/met_node_clonenode.asphttp://www.w3schools.com/dom/met_cdata_appenddata.asphttp://www.w3schools.com/dom/met_cdata_appenddata.asphttp://www.w3schools.com/dom/met_node_appendchild.asphttp://www.w3schools.com/dom/met_node_appendchild.asphttp://www.w3schools.com/dom/met_document_renamenode.asphttp://www.w3schools.com/dom/met_document_renamenode.asphttp://www.w3schools.com/dom/prop_node_text.asphttp://www.w3schools.com/dom/met_document_getelementsbytagname.asphttp://www.w3schools.com/dom/met_document_getelementsbytagname.asphttp://www.w3schools.com/dom/prop_node_textcontent.asphttp://www.w3schools.com/dom/met_document_createtextnode.asphttp://www.w3schools.com/dom/met_document_createtextnode.asphttp://www.w3schools.com/dom/prop_node_previoussibling.asphttp://www.w3schools.com/dom/met_document_createelement.asphttp://www.w3schools.com/dom/met_document_createelement.asphttp://www.w3schools.com/dom/prop_node_prefix.asphttp://www.w3schools.com/dom/met_nodemap_removenameditem.asphttp://www.w3schools.com/dom/met_nodemap_removenameditem.asphttp://www.w3schools.com/dom/prop_node_parentnode.asphttp://www.w3schools.com/dom/met_nodemap_getnameditem.asphttp://www.w3schools.com/dom/met_nodemap_getnameditem.asphttp://www.w3schools.com/dom/prop_node_nodevalue.asphttp://www.w3schools.com/dom/met_nodelist_item.asphttp://www.w3schools.com/dom/met_nodelist_item.asphttp://www.w3schools.com/dom/prop_node_nodetype.asphttp://www.w3schools.com/dom/prop_nodelist_length.asphttp://www.w3schools.com/dom/prop_node_nodename.asphttp://www.w3schools.com/dom/met_node_replacechild.asphttp://www.w3schools.com/dom/met_node_replacechild.asphttp://www.w3schools.com/dom/prop_node_nextsibling.asphttp://www.w3schools.com/dom/met_node_removechild.asphttp://www.w3schools.com/dom/met_node_removechild.asphttp://www.w3schools.com/dom/prop_node_lastchild.asphttp://www.w3schools.com/dom/met_node_isequalnode.asphttp://www.w3schools.com/dom/met_node_isequalnode.asphttp://www.w3schools.com/dom/prop_node_firstchild.asphttp://www.w3schools.com/dom/met_node_insertbefore.asphttp://www.w3schools.com/dom/met_node_insertbefore.asphttp://www.w3schools.com/dom/prop_node_childnodes.asp


7/23

Xml dom exchanges data with the server.

Inorder to load and get the data from the

server we use Ajax.


8/23

Rich Internet Application (RIA)

Technologies

Applet

Macromedia Flash/Air

Java WebStart DHTML

Ajax

Sliverlight (Windows only) JavaFX (Java Platform)


9/23

Applet

Pros: Can use full Java APIs

Custom data streaming, graphic manipulation,threading, and advanced GUIs

Well-established scheme Cons:

Code downloading time could be significant

Reliability concern - a mal-functioning applet can

crash a browser There is renewed interest in applet, however, as a

RIA technology with Java SE 10 Update 10 Solves old applet problems


10/23

Macromedia Flash

Designed for playing interactive movies originally

Programmed with ActionScript

Implementation examples

Macromedia Flex

Laszlo suite (open source)

Pros:

Good for displaying vector graphics Cons:

Browser needs a Flash plug-in

ActionScript is proprietary


11/23

Java WebStart

Desktop application delivered over the net Leverages the strengths of desktop apps and applet

Pros Desktop experience once loaded

Leverages Java technology to its fullest extent Disconnected operation is possible

Application can be digitally signed

Incremental redeployment

Cons Old JRE-based system do not work

First-time download time could be still significant


12/23

DHTML (Dynamic HTML)

DHTML = JavaScript + DOM + CSS

Used for creating interactive applications

No asynchronous communication, however

Full page refresh still required Reason why it has only a limited success


13/23

AJAX AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small

amounts of data with the server behind the scenes. This means that it is

possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page ifthe content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and

Facebook

AJAX is based on internet standards, and uses a combination of:

XMLHttpRequest object (to exchange data asynchronously with aserver)

JavaScript/DOM (to display/interact with the information)

CSS (to style the data)

XML (often used as the format for transferring data)


14/23

How AJAXworks


15/23

The XMLHttpRequest Object

All modern browsers support the XMLHttpRequest object (IE5 and IE6 usean ActiveXObject).

The XMLHttpRequest object is used to exchange data with a server behind

the scenes. This means that it is possible to update parts of a web page,without reloading the whole page.

All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have abuilt-in XMLHttpRequest object.

Syntax for creating an XMLHttpRequest object:

variable=new XMLHttpRequest(); Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:

variable=new ActiveXObject("Microsoft.XMLHTTP");

Send a Request To a Server

To send a request to a server, we use the open() and send() methods of

the XMLHttpRequest object: xmlhttp.open("GET",url",true);

xmlhttp.send();


16/23

Server Response

To get the response from a server, use the responseText or responseXMLproperty of the XMLHttpRequest object.

Property Description responseText get the response data as a stringresponseXML get the response data as XML dataxmlhttp.responseText;

The onreadystatechange event

When a request to a server is sent, we want to perform some actions based onthe response.

The onreadystatechange event is triggered every time the readyState changes.

The readyState property holds the status of the XMLHttpRequest.

Property Description

onreadystatechange Stores a function (or the name of a function) to becalled automatically each time the readyStateproperty changes

readyState Holds the status of the XMLHttpRequest.0: request not initialized1: server connection established2: request received3: processing request4: request finished and response is ready

status 200: "OK"

404: Page not found


17/23

List.xml

AnupamaNamburu

Asst professor

Don't forget the class this friday!

chaitanya

konda

Asst professor

Don't forget the class this monday!


18/23

Parsing xml using DOM

function loadxml(url)

{

if (window.XMLHttpRequest)

{

xhttp=new XMLHttpRequest();

}else

{

xhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xhttp.open("GET",url,false);

xhttp.send();

return xhttp.responseXML;

}

xmlDoc=loadxml("list.xml");


19/23

function processlist()

{

x=xmlDoc.documentElement.childNodes;

for(i=0;i


20/23

function changenode()

{

x=xmlDoc.getElementsByTagName("secondname")[0].childNodes[0];

x.nodeValue="priya";

}

function removenode()

{

y=xmlDoc.getElementsByTagName("faculty")[0];

xmlDoc.documentElement.removeChild(y);

}

function firstchild()

{

x=xmlDoc.documentElement.firstChild;

while (x.nodeType!=1)

{

x=x.nextSibling;

}

document.writeln(x.nodeName);

}


21/23

o tp t


22/23

outputListbytag button

AnupamaNamburuAsst professorDon't forget the class this weekend!

chaitanyakondaAsst professorDon't forget the class this weekend!

Changenodevalue

Anupamapriya

Asst professorDon't forget the class this weekend!chaitanyakondaAsst professorDon't forget the class this weekend!

Removenode

chaitanyakondaAsst professorDon't forget the class this weekend!


23/23

Ajax Notation

JSON:Javascript Object Notation.

A simple way to represent javascript Objects as

strings.Is an alternative way to pass data between

the client and server.

Each object is represented as

{properttName1:val1,propertyName2:value2}

Arrays [val1,val2,val3..]

dom presentation

Documents