Part 7

Document Object
Model (DOM)
CCSA 222: XML and Web Services
Part 7 1

Javascript
• Javascript (JS) is a dynamic programming language used for web-design.
• HTML is responsible for formatting a webpage. Then, JS code is embedded
in the HTML code to make it dynamic.
• JS is processed by the Browser. Therefore, it is considered a client-side
scripting language.
• Server-side scripting languages, such as PHP and ASP, are processed by the
server.

Javascript
• Javascript code must be inside the <script> and </script> tags.
• You can place JS code inside the <head> or <body> of the HTML code.
• Using Javascript to output:
• Writing into an alert box, using window.alert().
• Writing into the HTML output, using document.write().
• Writing into an HTML element,
using document.getElementByID(“…”).innerHTML.

window.alert()
• <!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(“hi!”);
</script>
</body>
</html>

document.write()
• <!DOCTYPE html>
<html>
<body>
<p>My first paragraph.</p>
<script>
document.write(“hi!”);
</script>
</body>
</html>

document.getElementByID(“…”).innerHTML
• <!DOCTYPE html>
<html>
<body>
<p id=“demo”>My first paragraph.</p>
<script>
document.getElementByID(“demo”).innerHTML=“hi!”;
</script>
</body>
</html>

JavaScript Variables
• JavaScript variables are containers for storing data values.
• Example:
• var x = 5;
var y = 6;
var z = x + y;
• From the example above, you can expect:
x stores the value 5
y stores the value 6
z stores the value 11

Declaring (Creating) JavaScript Variables
• You declare a JavaScript variable with the var keyword.
• Example: var carName;
• You can also assign a value to the variable when you declare it:
• var carName = "Volvo";

Functionsand EventHandlers
• The most common way to use JS and HTML is to place a function inside
the JS, and call it from the HTML using an event handler.
• This way, the JS code does not get executed until a certain event occurs.
• Example:
<html>
<body>
<script> function myFunction(){
………..
}
</script>
<input type=“button” value=“click me” onclick=“myFunction()”/>
</body>
</html>

EventHandler
Event Description
onchange An HTML element has been
changed
onclick The user clicks an HTML
element
onmouseover The user moves the mouse over
an HTML element
onmouseout The user moves the mouse away
from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished
loading the page

UsinganExternalJS file
• <!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

2-Document Object
Model (DOM)
16

What is the DOM?
• 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."
17

The XML DOM
• The XML DOM defines a standard way for accessing and
manipulating XML documents.
• All XML elements can be accessed through the XML
DOM.
• The XML DOM defines the objects, properties and
methods of all XML elements.
• In other words: The XML DOM is a standard for how to
get, change, add, or delete XML elements.
18

XML Example
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
19

Document Object Model (DOM)
• The XML DOM is an Object that represents the XML file as a node tree.
• This object allows programs and scripts to dynamically access and update
the content of an XML document.
• The XML DOM needs to be created first, then it can be used.
• When we create an XML DOM, we can use all the XML DOM properties
and methods to interact with the object.

The Node Tree
• The DOM represents everything in an XML document as a
node:
• 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
• Every comment is a comment node
• Every processing instruction is a processing instruction node

CreatingaDOMforthefollowingXMLdocument“books.xml”
<?xml version="1.0"
encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday
Italian</title>
<author>Giada De
Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry
Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
</book>
<book category="web">
<title lang="en">XQuery Kick
Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
</book>
</bookstore>

• YouwillcreatetheDOMusingaprogramminglanguagesuchasjavascript
• ThejavascriptcodewillbeinsideanHTMLfilebetweenthetags<script>…..</script>
<html>
<head>
<script src="loadxmldoc.js">
</script>
</head>
<body>
<script>
var xmlDoc;
xmlDoc=loadXMLDoc("books.xml");
</script>
</body>
</html>
The steps of creating DOM with
JS:
1-Declare a variable xmlDoc
2- Call the function loadXMLDoc() and
give it the xml file “books.xml”
3- the function will return an xml
DOM for the books.xml file, and it
will be stored in the variable
xmlDoc
The steps of creatingDOMwith JS.

The variable xmlDoc will be the DOM which represents the xml document as a node
tree
The XML DOM Node Tree

loadXMLDoc.js
• We create an XML DOM by requesting the browser to create an XMLHttpRequest:
function loadXMLDoc(filename) {
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest(); //code for IE7+ ,
Firefox , Chrome , Opera , Safari
}
else // code for IE5 and IE6
{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", filename, false);
xhttp.send();
return xhttp.responseXML;
}

The XMLHttpRequest Object
• The XMLHttpRequest object can be used to request data from a
web server. It is an object to handle the HTTP requests between
the client and the server.
• All modern browsers have a built-in XMLHttpRequest object to
request data from a server.

Properties and Methods
● Now that we have a DOM, we can access the xml document through the
DOM to get information from the xml document or make changes on it.
● The XML DOM presents an XML document as a tree-structure.
● Every node has properties and methods:
o Properties are often referred to as an adjective, or information about
the node (ex: nodeName is "book").
o Methods are often referred to as something that is done (ex: delete
"book").

• The XML DOM can be accessed with JavaScript (and with other
programming languages).
• In the DOM, all XML elements are defined as objects.
• The programming interface is the properties and methods of
each object.
• A property is a value that you can get or set (like changing the
content of an XML element).
• A method is an action you can do (like add or deleting an XML
element).

• XML DOM methods are actions you can perform (on XML
Elements).
• XML DOM properties are values (of XML Elements) that you can
set or change.

• x.nodeName - the name of x
• For element nodes it will return the name of the node
• For text nodes it will return #text (because text nodes do not have a name, they
only have values)
• For attribute nodes it will return the name of the attribute
• x.nodeValue - the value of x
• For element nodes it will return null (because they do not have values, they
only have names)
• For text nodes it will return the value
• For attribute nodes it will return the value of the attribute
The XML DOM Properties

● x.parentNode - the parent node of x
● Ex: x.parentNode.nodeName
● x.childNodes (array) - the child nodes of x
● Ex: x.childNodes[0].nodeValue
● x.attributes (array) - the attribute nodes of x
● Ex: x.attributes[0].nodeName
x.attributes[0].nodeValue

● x.documentElement - the root element
● Ex: x.documentElement.nodeName
● x.length - returns the length of the array
● Ex: x.attributes.length
x.childNodes.length

● x.getElementsByTagName(“name”) - get all elements with a
specified tag name
• If we have more than one, it will return an array, so we need to specify which
one we want.
• Example: if we want the third we will specify the index 2:
• x.getElementsByTagName(‘name’)[2]
● x.getAttribute(“attribute name”) – returns the Value of the
attribute
The XML DOM Methods

The XML DOM Methods
● x.setAttribute(“attribute name”,”new value”) – sets the
attribute to a new value.
● x.appendChild(node) - insert a child node to x
● x.removeChild(node) - remove a child node from x
● x.removeAttribute(node) - remove an attribute node from x

Get the value of an Element
• Element nodes do not have a text value.
• The text of an element node is stored in a child node. This node is called a text
node.
• The way to get the text of an element is to get the value of the child node (text
node) using the “nodeValue” property.
txt= xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue
Explained:
● xmlDoc - the XML DOM object created by the parser.
● getElementsByTagName("title")[0] - the first <title> element
● childNodes[0] - the first child of the <title> element (the text node)
● nodeValue - the value of the node (the text itself)

• x=xmlDoc.getElementsByTagName("title");
• This method generates the following
node list in the graph:
• The getElementsByTagName() method returns
a node list containing all elements with the
specified tag name in the same order as they
appear in the source document.
• var txt = x[0].childNodes[0].nodeValue;
• The above code fragment returns the text
from the first <title> element in the node
list (x).
• txt = "Everyday Italian".
Get the value of an Element

Get the Value of an Element
x=xmlDoc.getElementsByTagName("title")[0];
y=x.childNodes[0];
txt=y.nodeValue;
Or
x=xmlDoc.getElementsByTagName("title")[0].childNo
des[0].nodeValue;

Get the Value of an Attribute
• Unlike element nodes, attribute nodes have text values.
The way to get the value of an attribute, is to get its text value.
1) Using the properties “attributes” and “nodeValue”:
txt=
xmlDoc.getElementsByTagName(‘title’)[0].attributes
[0].nodeValue;
2) Using the method “getAttribute()”:
txt=xmlDoc.getElementsByTagName("title")[0].getAttri
bute("lang");
• Output:
txt = "en"

ChangingtheValueof an Element
• Change the value of an element by setting the “nodeValue” property to a
new value:
xmlDoc.getElementsByTagName("title")[0].childNodes[0].no
deValue="Easy Cooking";
Try the code:
http://www.w3schools.com/dom/tryit.asp?filename=try_dom_changeelement

Changingthe Value of an Attribute
• Using the property “nodeValue”
• xmlDoc.getElementsByTagName('book')[0].attributes[0].nod
eValue = “food”;
• Using the method “setAttribute()”
• x=xmlDoc.getElementsByTagName('book')[0].setAttribute("c
ategory","food");

Get the Length
• This code fragment returns the number of <title> elements in
"books.xml":
• x = xmlDoc.getElementsByTagName('title').length;
• Output:
x=4
• A node list object keeps itself up-to-date. If an element is deleted or
added, the list is automatically updated.

Get the Length-Example
• This code fragment gets the value of the "category" attribute, and
the number of attributes, of a book:
• x = xmlDoc.getElementsByTagName("book")[0].attributes;
txt = x.getNamedItem("category").nodeValue + " " + x.length);
• Output:
cooking 1

Loopingthroughnodes
• you can use a “for loop” to loop through sibling nodes
• you will need the “length” property to loop through all the sibling nodes
x=xmlDoc.getElementsByTagName("title");
for (i=0; i<x.length; i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write("<br>");
}
• Try the code on this link:
http://www.w3schools.com/dom/tryit.asp?filename=try_dom_list_loop

<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
function firstBook()
{
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0].
nodeValue;
document.write(x);
}
</script>
<input type="button" value="click me" onClick="firstBook()"/>
</body>
XML and JavaScript Events
Output:
Everyday Italian

XMLand JavaScriptEvents
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>
<script>
function bookTitles()
{
x=xmlDoc.getElementsByTagName("title");
for (i=0; i<x.length; i++)
{
document.write(x[i].childNodes[0].nodeValue);
document.write("<br>");
}
}
</script>
<input type="button" value="click me" onClick=“bookTitles()"/>
</body>
</html>
Output:
Everyday Italian
Harry Potter
XQuery Kick Start
Learning XML

Summary
• XML, JavaScript and HTML are commonly used together to create interactive
pages.
• XML acts as the data source.
• HTML is the design of your web page.
• Javascript is embedded in your HTML file to make it interactive (dynamic).
• We use javascript to create an XML DOM.
• XML DOM used to access the xml.
• Then, we use the properties and methods of the DOM Object to interact
with the XML data (ex: get information, add information, delete, edit)

References
• Carey, P. (2007). New perspectives on XML: Comprehensive (2nd
ed.). Australia: Thomson/Course Technology.
• XML DOM Tutorial. (n.d.). Retrieved November 7, 2015, from
http://www.w3schools.com/xml/dom_intro.asp

Part 7

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to Part 7

Similar to Part 7 (20)

Recently uploaded

Recently uploaded (20)

Part 7