WEB TECHNOLOGY Unit-4.pptx

Unit – IV DOM AND XML
Presented By
K.Karthick M.E(Ph.D.)
Assistant Professor/CSE,
Kongunadu College of Engineering And Technology.

• Document – File( Html, xml, etc..)
• Object- ( Tag, elements,..)
• Model ( layout Structure)
• Each browser will follow different pattern, which allows to access,
manipulates the content in the html

What is the DOM?
• The DOM is a W3C (World Wide Web Consortium) standard.
• The DOM defines a standard for accessing documents:
• "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 W3C DOM standard is separated into 3 different parts:
• Core DOM - standard model for all document types
• XML DOM - standard model for XML documents
• HTML DOM - standard model for HTML documents

• What is the DOM?
• Imagine this: you have the TV on. You don't like the show that's being streamed,
and you want to change it. You also want to increase its volume.
• To do that, there has to be a way for you to interact with your television. And
what do you use to do that?
• A remote.
• The remote serves as the bridge which allows you interact with your television.
• You make the TV active and dynamic via the remote. And in the same way,
JavaScript makes the HTML page active and dynamic via the DOM.
• Just like how the television can't do much for itself, JavaScript doesn't do much
more than allow you to perform some calculations or work with basic strings.
• So to make an HTML document more interactive and dynamic, the script needs to
be able to access the contents of the document and it also needs to know when
the user is interacting with it.
• It does this by communicating with the browser using the properties, methods,
and events in the interface called the Document Object Model, or DOM.

What is the HTML DOM?
• The HTML DOM is a standard object model and programming
interface for HTML. It defines:
• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements
• In other words: The HTML DOM is a standard for how to get, change,
add, or delete HTML elements.

The History of the DOM
• The Document Object Model was developed by the World Wide Web
Consortium (W3C) to allow programming languages access to the
underlying structure of a Web document.
• Using the DOM a program can access any element in the document,
determining and changing attributes and even removing, adding, or
rearranging elements at will.
• It's important to note that the DOM is a type of application program
interface (API) allowing any programming language access to the structure
of a Web document.
• The main advantage of using the DOM is the ability to manipulate a
document without another trip to the document's server. As such, the
DOM is typically accessed and used by client-side technologies, such as
JavaScript. Therefore, the coverage of the DOM in this book appears in the
JavaScript part of the book and is very JavaScript-centric.

• The first DOM specification (Level 0) was developed at the same time
as JavaScript and early browsers. It is supported by Netscape 2
onward.
• There were two intermediate DOMs supported by Netscape 4 onward
and Microsoft Internet Explorer (IE) versions 4 and 5 onward. These
DOMs were proprietary to the two sides of the browser coin —
Netscape and Microsoft IE.
• The former used a collection of elements referenced through a
document.layers object, while the latter used a document.all object.
To be truly cross-browser compatible, a script should endeavor to
cover both of these DOMs instead of one or the other.

The HTML DOM (Document Object Model)
• When a web page is loaded, the browser creates
a Document Object Model of the page.
• The HTML DOM model is constructed as a tree of Objects:

Components of a Web Browser
• 1. User Interface
• It is an environment allowing users to use certain features like search bar, refresh button, menu,
bookmarks, etc.
• 2. Browser Engine
• The bridge connects the interface and the engine. It monitors the rendition engine while
manipulating the inputs coming from multiple user interfaces.
• 3. Networking
• The protocol provides an URL and manages all sorts of safety, privacy and communication.
In addition, the store network traffic gets saved in retrieved documents.
• 4. Data Storage
• The cookies store information as the data store is an uniform layer that the browsers use. Storage
processes like IndexedDB, WebSQL, localStorage, etc works well on browsers.
• 5. JavaScript Interpreter
• It allows conversion of JavaScript code in a document and the executes it. Then the engine shows
the translation on the screen to the users.

JavaScript - HTML DOM Methods
• HTML DOM methods are actions you can perform (on HTML Elements).
• HTML DOM properties are values (of HTML Elements) that you can set or
change.
The DOM Programming Interface
• The HTML DOM can be accessed with JavaScript (and with other
programming languages).
• In the DOM, all HTML 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 HTML element).
• A method is an action you can do (like add or deleting an HTML element).

The HTML DOM Document Object
• The document object represents your web page.
• If you want to access any element in an HTML page, you always start
with accessing the document object.
• Below are some examples of how you can use the document object to
access and manipulate HTML.

• Finding HTML Elements
• Changing HTML Elements
Property Description
element.innerHTML = new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML
element
element.style.property = new style Change the style of an HTML element
Method Description
element.setAttribute(attribute, value) Change the attribute value of an HTML
element
Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(nam
e)
Find elements by class name

• Adding and Deleting Elements
Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream

• Finding HTML Element by Id
• The easiest way to find an HTML element in the DOM, is by using the
element id.
• This example finds the element with id="intro":
• Example
• const element = document.getElementById("intro");

• <!DOCTYPE html>
• <html>
• <body>
• <h2>JavaScript HTML DOM</h2>
• <p id="intro">Finding HTML Elements by Id</p>
• <p>This example demonstrates the <b>getElementsById</b> method.</p>
• <p id="demo"></p>
• <script>
• const element = document.getElementById("intro");
• document.getElementById("demo").innerHTML =
• "The text from the intro paragraph is: " + element.innerHTML;
• </script>
• </body>
• </html>

• JavaScript HTML DOM
• Finding HTML Elements by Id
• This example demonstrates the getElementsById method.
• The text from the intro paragraph is: Finding HTML Elements by Id

• Finding HTML Elements by Tag Name
• This example finds all <p> elements:
• Example
• const element = document.getElementsByTagName("p");

• <!DOCTYPE html>
• <html>
• <body>
• <h2>JavaScript HTML DOM</h2>
• <p>Finding HTML Elements by Tag Name.</p>
• <p>This example demonstrates the <b>getElementsByTagName</b>
method.</p>
• <p id="demo"></p>
• <script>
• const element = document.getElementsByTagName("p");
• document.getElementById("demo").innerHTML = 'The text in first paragraph
(index 0) is: ' + element[0].innerHTML;
• </script>
• </body>
• </html>

• JavaScript HTML DOM
• Finding HTML Elements by Tag Name.
• This example demonstrates the getElementsByTagName method.
• The text in first paragraph (index 0) is: Finding HTML Elements by Tag
Name

DOM Events
• DOM Events allow JavaScript to add event listener or event
handlers to HTML elements.
• Examples
• In HTML onclick is the event listener, myFunction is the event handler:
• <button onclick="myFunction()">Click me</button>
• In JavaScript click is the event, myFunction is the event handler:
• button.addEventListener("click", myFunction);

The Event Object
Event Occurs When
abort The loading of a media is aborted
afterprint A page has started printing
beforeprint A page is about to be printed
beforeunload Before the document is about to be unloaded
canplay The browser can start playing a media (has buffered enough to
begin)
canplaythrough The browser can play through a media without stopping for
buffering

• change
• The content of a form element have changed
• ended
• A media has reach the end ("thanks for listening")
• error
• An error has occurred while loading a file
• fullscreenchange
• An element is displayed in fullscreen mode
• fullscreenerror
• An element can not be displayed in fullscreen mode
• input
• An element gets user input
• invalid
• An element is invalid

HTML DOM FocusEvent
• The FocusEvent Object
• The FocusEvent Object handles events that occur when elements gets
or loses focus.
Event Occurs When
onblur An element loses focus
onfocus An element gets focus
onfocusin An element is about to get focus
onfocusout An element is about to lose focus

HTML DOM InputEvent
• The InputEvent Object
• The InputEvent Object handles events that occur when an input
element is changed.
• InputEvent Properties:
Property Returns
data The inserted characters
dataTransfer An object containing information about
the inserted/deleted data
inputType The type of the change (i.e "inserting" or
"deleting")
isComposing If the state of the event is composing or
not

DOM KeyboardEvent
• The KeyboardEvent Object
• The KeyboardEvent Object handles events that occur when a user
presses a key on the keyboard.
• Keyboard Events
Event Occurs When
onkeydown A user presses a key
onkeypress A user presses a key
onkeyup A user releases a key

• <!DOCTYPE html>
• <html>
• <body>
• <p onclick="myEvent(this)">Click me</p>
• <script>
• function myEvent(id)
• {
• id.innerHTML = "Welcome!";
• }
• </script>
• </body>
• </html>

onclick Event Type
• <html>
• <head>
• <script>
• function sayHello() {
• alert("Hello World")
• }
• </script>
• </head>
• <body>
• <p>Click the following button and see result</p>
• <form>
• <input type="button" onclick="sayHello()" value="Say Hello" />
• </form>
• </body>
• </html>

• <html>
• <head>
• <script>
• 
• </script>
• </head>
• <body>
• <p>Bring your mouse inside the division to see the result:</p>
• <div onmouseover="over()" onmouseout="out()">
• <h2> This is inside the division </h2>
• </div>
• </body>
• </html>

What is xml
• Xml (eXtensible Markup Language) is a mark up language.
• XML is designed to store and transport data.
• Xml was released in late 90’s. it was created to provide an easy to use
and store self describing data.
• XML became a W3C Recommendation on February 10, 1998.
• XML is not a replacement for HTML.
• XML is designed to be self-descriptive.
• XML is designed to carry data, not to display data.
• XML is case-sensitive.
• XML tags are not predefined. You must define your own tags.
• XML is platform independent and language independent.

Why xml
• Platform Independent and Language Independent:
• The main benefit of xml is that you can use it to take data from a
program like Microsoft SQL, convert it into XML then share that XML
with other programs and platforms. You can communicate between
two platforms which are generally very difficult.
• The main thing which makes XML truly powerful is its international
acceptance. Many corporation use XML interfaces for databases,
programming, office application mobile phones and more. It is due to
its platform independent feature.

Features and Advantages of XML
• XML is widely used in the era of web development. It is also used to
simplify data storage and data sharing.
• The main features or advantages of XML are given below.
• XML separates data from HTML
• XML simplifies data sharing
• XML simplifies data transport
• XML simplifies Platform change
• XML increases data availability
• XML can be used to create new internet languages

• XML documents must contain a root element. This element is "the
parent" of all other elements.
• The elements in an XML document form a document tree. The tree
starts at the root and branches to the lowest level of the tree.
• All elements can have sub elements (child elements).
• <root>
• <child>
• <subchild>.....</subchild>
• </child>
• </root>

XML Example
• XML documents create a hierarchical structure looks like a tree so it is
known as XML Tree that starts at "the root" and branches to "the
leaves".
• <?xml version="1.0" encoding=“UTF-8"?>
• Encoding refers to character encoding part
• <note>
• <to>Tove</to>
• <from>Jani</from>
• <heading>Reminder</heading>
• <body>Don't forget me this weekend!</body>
• </note>

• <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>
• </book>
• <book category="WEB">
• <title lang="en">Learning XML</title>
• <author>Erik T. Ray</author>
• </book>
• </bookstore>

XML Tree Structure
• An XML document has a self descriptive structure. It forms a tree
structure which is referred as an XML tree. The tree structure makes
easy to describe an XML document.
• A tree structure contains root element (as parent), child element and
so on. It is very easy to traverse all succeeding branches and sub-
branches and leaf nodes starting from the root.

• XML Tree Rules
• These rules are used to figure out the relationship of the elements. It
shows if an element is a child or a parent of the other element.
• Descendants: If element A is contained by element B, then A is
known as descendant of B. In the above example "College" is the root
element and all the other elements are the descendants of "College".
• Ancestors: The containing element which contains other elements is
called "Ancestor" of other element. In the above example Root
element (College) is ancestor of all other elements.

XML Validation
• A well formed XML document can be validated against DTD or
Schema.
• A well-formed XML document is an XML document with correct
syntax. It is very necessary to know about valid XML document before
knowing XML validation.
• Valid XML document
• It must be well formed (satisfy all the basic syntax condition)
• It should be behave according to predefined DTD or XML schema

Rules for well formed XML
• It must begin with the XML declaration.
• It must have one unique root element.
• All start tags of XML documents must match end tags.
• XML tags are case sensitive.
• All elements must be closed.
• All elements must be properly nested.
• All attributes values must be quoted.
• XML entities must be used for special characters.

XML DTD
• A DTD defines the legal elements of an XML document
• In simple words we can say that a DTD defines the document
structure with a list of legal elements and attributes.
• XML schema is a XML based alternative to DTD.
• Actually DTD and XML schema both are used to form a well formed
XML document.

• XML schema
• It is defined as an XML language
• Uses namespaces to allow for reuses of existing definitions
• It supports a large number of built in data types and definition of
derived data types

XML DTD
• What is DTD
• DTD stands for Document Type Definition. It defines the legal
building blocks of an XML document. It is used to define document
structure with a list of legal elements and attributes.
• Purpose of DTD
• Its main purpose is to define the structure of an XML document.
• It contains a list of legal elements and define the structure with the
help of them.

• Checking Validation
• Before proceeding with XML DTD, you must check the validation. An
XML document is called "well-formed" if it contains the correct
syntax.
• A well-formed and valid XML document is one which have been
validated against DTD.
• Types:
• Internal DTD
• External DTD

Syntax
• Basic syntax of a DTD is as follows −
• <!DOCTYPE element DTD identifier
• [
• declaration1;
• declaration2;
• ........
• ]>

Valid and well-formed XML document with
DTD
• employee.xml
• <?xml version="1.0"?>
• <!DOCTYPE employee SYSTEM "employee.dtd">
• <employee>
• <firstname>vimal</firstname>
• <lastname>jaiswal</lastname>
• <email>vimal@javatpoint.com</email>
• </employee>

• employee.dtd
• <!DOCTYPE employee[
• <!ELEMENT employee (firstname,lastname,email)>
• <!ELEMENT firstname (#PCDATA)>
• <!ELEMENT lastname (#PCDATA)>
• <!ELEMENT email (#PCDATA)>
• ]>

Internal DTD
• <?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
• <!DOCTYPE address [
• <!ELEMENT address (name,company,phone)>
• <!ELEMENT name (#PCDATA)>
• <!ELEMENT company (#PCDATA)>
• <!ELEMENT phone (#PCDATA)>
• ]>
• <address>
• <name>Tanmay Patil</name>
• <company>TutorialsPoint</company>
• <phone>(011) 123-4567</phone>
• </address>

• External DTD
• In external DTD elements are declared outside the XML file.
• They are accessed by specifying the system attributes which may be
either the legal .dtd file or a valid URL.
• To refer it as external DTD, standalone attribute in the XML
declaration must be set as no. This means, declaration includes
information from the external source.

• <?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
• <address>
• <name>Tanmay Patil</name>
• <company>TutorialsPoint</company>
• <phone>(011) 123-4567</phone>
• </address>
The content of the DTD file address.dtd is as shown −
• <!ELEMENT address (name,company,phone)>
• <!ELEMENT name (#PCDATA)>
• <!ELEMENT company (#PCDATA)>
• <!ELEMENT phone (#PCDATA)>

• Description of DTD
• <!DOCTYPE employee : It defines that the root element of the
document is employee.
• <!ELEMENT employee: It defines that the employee element contains
3 elements "firstname, lastname and email".
• <!ELEMENT firstname: It defines that the firstname element is
#PCDATA typed. (parse-able data type).
• <!ELEMENT lastname: It defines that the lastname element is
#PCDATA typed. (parse-able data type).
• <!ELEMENT email: It defines that the email element is #PCDATA
typed. (parse-able data type).

• PCDATA
• PCDATA means parsed character data.
• Think of character data as the text found between the start tag and
the end tag of an XML element.
• PCDATA is text that WILL be parsed by a parser. The text will be
examined by the parser for entities and markup.
• Tags inside the text will be treated as markup and entities will be
expanded.
• However, parsed character data should not contain any &, <, or >
characters; these need to be represented by the & < and >
entities, respectively.

• CDATA
• CDATA means character data.
• CDATA is text that will NOT be parsed by a parser. Tags inside the
text will NOT be treated as markup and entities will not be expanded.

XML Schema
• What is XML schema
• XML schema is a language which is used for expressing constraint
about XML documents. There are so many schema languages which
are used now a days for example Relax- NG and XSD (XML schema
definition).
• XML Schema is commonly known as XML Schema Definition (XSD).
• An XML schema is used to define the structure of an XML document.
It is like DTD but provides more control on XML structure.

• Checking Validation
• An XML document is called "well-formed" if it contains the correct
syntax.
• A well-formed and valid XML document is one which have been
validated against Schema.

XML Schema Example
• employee.xsd
• <?xml version="1.0"?>
• <xs:schema xmlns:xs=“http://www.w3.org/2001/XMLSchema”>
• <xs:element name="employee">
• <xs:complexType>
• <xs:sequence>
• <xs:element name="firstname" type="xs:string"/>
• <xs:element name="lastname" type="xs:string"/>
• <xs:element name="email" type="xs:string"/>
• </xs:sequence>
• </xs:complexType>
• </xs:element>
• </xs:schema>

Example 2
• <?xml version = "1.0" encoding = "UTF-8"?>
• <xs:schema xmlns:xs = "http://www.w3.org/2001/XMLSchema">
• <xs:element name = "contact">
• <xs:sequence>
• <xs:element name = "name" type = "xs:string" />
• <xs:element name = "company" type = "xs:string" />
• <xs:element name = "phone" type = "xs:int" />
• </xs:sequence>
• </xs:element>
• </xs:schema>

Example 3
• <xs:element name = "Address">
• <xs:sequence>
• <xs:element name = "name" type = "xs:string" />
• <xs:element name = "company" type = "xs:string" />
• <xs:element name = "phone" type = "xs:int" />
• </xs:sequence>
• </xs:element>

Description of XML Schema
• <xs:element name="employee"> : It defines the element name employee.
• <xs:complexType> : It defines that the element 'employee' is complex
type.
• <xs:sequence> : It defines that the complex type is a sequence of
elements.
• <xs:element name="firstname" type="xs:string"/> : It defines that the
element 'firstname' is of string/text type.
•
<xs:element name="lastname" type="xs:string"/> : It defines that the
element 'lastname' is of string/text type.
• <xs:element name="email" type="xs:string"/> : It defines that the
element 'email' is of string/text type.

DTD vs XSD
DTD XSD
1) DTD stands for Document Type Definition. XSD stands for XML Schema Definition.
2) DTDs are derived from SGML syntax. XSDs are written in XML.
3) DTD doesn't support datatypes. XSD supports datatypes for elements and attributes.
4) DTD doesn't support namespace. XSD supports namespace.
5) DTD doesn't define order for child elements. XSD defines order for child elements.
6) DTD is not extensible. XSD is extensible.
7) DTD is not simple to learn.
XSD is simple to learn because you don't need to learn
new language.
8) DTD provides less control on XML structure. XSD provides more control on XML structure.

XML Namespaces
• XML Namespace is used to avoid element name conflict in XML
document.
• XML Namespace Declaration
• An XML namespace is declared using the reserved XML attribute. This
attribute name must be started with "xmlns".
• Let's see the XML namespace syntax:
• <element xmlns:name = "URL">

• Here, namespace starts with keyword "xmlns". The word name is a
namespace prefix. The URL is a namespace identifier.
• Example 3:
• <?xml version="1.0" encoding="UTF-8"?>
• <cont:contact xmlns:cont="http://sssit.org/contact-us">
• <cont:name>Vimal Jaiswal</cont:name>
• <cont:company>SSSIT.org</cont:company>
• <cont:phone>(0120) 425-6464</cont:phone>
• </cont:contact>

XML Parsers
• XML Parsers:
• An XML parser is a software library or package that provides
interfaces for client applications to work with an XML document.
• The XML Parser is designed to read the XML and create a way for
programs to use XML.
• XML parser validates the document and check that the document is
well formatted.

• Let's understand the working of XML parser by the figure given
below:

• Types of XML Parsers
• These are the two main types of XML Parsers:
• DOM
• SAX
• DOM (Document Object Model)
• A DOM document is an object which contains all the information of an XML
document. It is composed like a tree structure. The DOM Parser
implements a DOM API. This API is very simple to use.
• Features of DOM Parser
• A DOM Parser creates an internal structure in memory which is a DOM
document object and the client applications get information of the original
XML document by invoking methods on this document object.
• DOM Parser has a tree based structure.

What does XML DOM
• The XML
• We can access all elements through the DOM tree.
• We can modify or delete their content and also create new elements.
The elements, their content (text and attributes) are all known as
nodes.
• DOM makes a tree-structure view for an XML document.

• Advantages
• 1) It supports both read and write operations and the API is very
simple to use.
• 2) It is preferred when random access to widely separated parts of a
document is required.
• Disadvantages
• 1) It is memory inefficient. (consumes more memory because the
whole XML document needs to loaded into memory).
• 2) It is comparatively slower than other parsers.

SAX (Simple API for XML)
• SAX (Simple API for XML)
• A SAX Parser implements SAX API. This API is an event based API and less
intuitive.
• Features of SAX Parser
• It does not create any internal structure.
• Clients does not know what methods to call, they just overrides the
methods of the API and place his own code inside method.
• It is an event based parser, it works like an event handler in Java.
• Advantages
• 1) It is simple and memory efficient.
• 2) It is very fast and works for huge documents.

• Disadvantages
• 1) It is event-based so its API is less intuitive.
• 2) Clients never know the full information because the data is broken
into pieces.

XML DOM
• What is XML DOM
• DOM is an acronym stands for Document Object Model. It defines a
standard way to access and manipulate documents. The Document
Object Model (DOM) is a programming API for HTML and XML
documents. It defines the logical structure of documents and the way
a document is accessed and manipulated.
• As a W3C specification, one important objective for the Document
Object Model is to provide a standard programming interface that can
be used in a wide variety of environments and applications. The
Document Object Model can be used with any programming
language.
• XML DOM defines a standard way to access and manipulate XML
documents.

• <TABLE>
• <ROWS>
• <TR>
• <TD>A</TD>
• <TD>B</TD>
• </TR>
• <TR>
• <TD>C</TD>
• <TD>D</TD>
• </TR>
• </ROWS>
• </TABLE>

XPath Tutorial
• XPath is a component of XSLT standard provided by W3C.
• It is used to traverse the elements and attributes of an XML
document.
• XPath tutorial includes all topics of XPath such as XPath syntax,
expression, nodes, operators, axes, absolute path, relative path,
wildcard etc.

• What is XPath
• XPath is an important and core component of XSLT standard. It is used to traverse
the elements and attributes in an XML document.
• XPath is a W3C recommendation. XPath provides different types of expressions to
retrieve relevant information from the XML document. It is syntax for defining
parts of an XML document.
• Important Features of XPath
• XPath defines structure: XPath is used to define the parts of an XML document
i.e. element, attributes, text, namespace, processing-instruction, comment, and
document nodes.
• XPath provides path expression: XPath provides powerful path expressions,
select nodes, or list of nodes in XML documents.
• XPath is a core component of XSLT: XPath is a major element in XSLT standard
and must be followed to work with XSLT documents.
• XPath is a standard function: XPath provides a rich library of standard functions
to manipulate string values, numeric values, date and time comparison, node and
QName manipulation, sequence manipulation, Boolean values etc.
• Path is W3C recommendation.

XPath Expression
• XPath defines a pattern or path expression to select nodes or node
sets in an XML document. These patterns are used by XSLT to perform
transformations. The path expressions look like very similar to the
general expressions we used in traditional file system.

• XPath specifies seven types of nodes that can be output of the
execution of the XPath expression.
• Root
• Element
• Text
• Attribute
• Comment
• Processing Instruction
• Namespace

XPath Syntax
• The XPath expression uses a path notation like URLs, for addressing
parts of an XML document. The expression is evaluated to yield an
object of the node-set, Boolean, number, or string type. For example,
the expression book/author will return a node-set of the <author>
elements contained in the <book> elements, if such elements are
declared in the source XML document.

• In XPath, path expression is used to select nodes or node-sets in an XML
document. The node is selected by following a path or steps.
• Let's take an example to see the syntax of XPath. Here, we take an XML
document.
• <bookstore>
• <book>
• <title lang="en">Three Mistakes of My Life</title>
• <price>110</price>
• </book>
• <book>
• <title lang="en">Immortals of Meluha</title>
• <price>200</price>
• </book>
• </bookstore>

• Selecting Nodes
• Path expressions used for selecting nodes are:
Index Expression Description
1) nodename Selects all nodes with the name "nodename"
2) / Selects from the root node.
3) // Selects nodes in the document from the current node
that match the selection no matter where they are.
4) . Selects the current node
5) .. Selects the parent of the current node
6) @ Selects attributes

Path
Expression
Result
bookstore Selects all nodes with the name "bookstore"
/bookstore Selects the root element bookstore. Note: if the path starts with a slash
( / ) it always represents an absolute path to an element!
bookstore/boo
k
Selects all book elements that are children of bookstore.
//book Selects all book elements no matter where they are in the document.
bookstore//bo
ok
Selects all book elements that are descendant of the bookstore
element, no matter where they are under the bookstore element.
//@lang Selects all attributes that are named lang.

• Predicates
• Predicates are used to find a specific node or a node that contains a
specific value.
• Predicates are always embedded in square brackets.

Path Expression Result
/bookstore/book[1] Selects the first book element that is the child of the
bookstore element. Note: In IE 5,6,7,8,9 first node is[0], but
according to W3C, it is [1]. To solve this problem in IE, set
the selectionlanguage to XPath:in JavaScript:
xml.setProperty("SelectionLanguage","XPath");
/bookstore/book[last()] Selects the last book element that is the child of the
bookstore element.
/bookstore/book[last()-1] Selects the last but one book element that is the child of the
bookstore element.
/bookstore/book[position()
<3]
Selects the first two book elements that are children of the
bookstore element.

• Selecting Unknown Nodes
• XPath wildcards are used to select unknown XML nodes.
Wildcard Description
* Matches any element node
@* Matches any attribute node
node() Matches any node of any kind

What is XSLT
• XSL (eXtensible Stylesheet Language) is a styling language for XML.
• XSLT stands for XSL Transformations.
• XSLT stands for XSL Transformation. It is used to transform XML documents into
other formats (like transforming XML into HTML).
• What is XSL
• In HTML documents, tags are predefined but in XML documents, tags are not
predefined. World Wide Web Consortium (W3C) developed XSL to understand
and style an XML document, which can act as XML based Stylesheet Language.
• An XSL document specifies how a browser should render an XML document.
• Main parts of XSL Document
• XSLT: It is a language for transforming XML documents into various other types of
documents.
• XPath: It is a language for navigating in XML documents.
• XQuery: It is a language for querying XML documents.
• XSL-FO: It is a language for formatting XML documents.

• CSS = Style Sheets for HTML
• HTML uses predefined tags. The meaning of, and how to display each
tag is well understood.
• CSS is used to add styles to HTML elements.
• XSL = Style Sheets for XML
• XML does not use predefined tags, and therefore the meaning of each
tag is not well understood.
• A <table> element could indicate an HTML table, a piece of furniture,
or something else - and browsers do not know how to display it!
• So, XSL describes how the XML elements should be displayed.

XSLT - Transformation
• Correct Style Sheet Declaration
• The root element that declares the document to be an XSL style sheet
is <xsl:stylesheet> or <xsl:transform>.
• Note: <xsl:stylesheet> and <xsl:transform> are completely
synonymous and either can be used!
• The correct way to declare an XSL style sheet according to the W3C
XSLT Recommendation is:
• <xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

How XSLT Works
• The XSLT stylesheet is written in XML format. It is used to define the
transformation rules to be applied on the target XML document.
• The XSLT processor takes the XSLT stylesheet and applies the
transformation rules on the target XML document and then it
generates a formatted document in the form of XML, HTML, or text
format. At the end it is used by XSLT formatter to generate the actual
output and displayed on the end-user.

• cdcatalog.xml
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

• cdcatalog.xsl
<xsl:stylesheet version="1.0“ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

XSLT <xsl:template> Element
• The <xsl:template> Element
• The <xsl:template> element is used to build templates.
• The match attribute is used to associate a template with an XML
element. The match attribute can also be used to define a template
for the entire XML document. The value of the match attribute is an
XPath expression (i.e. match="/" defines the whole document).

WEB TECHNOLOGY Unit-4.pptx

Recommended

Recommended

More Related Content

Similar to WEB TECHNOLOGY Unit-4.pptx

Similar to WEB TECHNOLOGY Unit-4.pptx (20)

More from karthiksmart21

More from karthiksmart21 (9)

Recently uploaded

Recently uploaded (20)

WEB TECHNOLOGY Unit-4.pptx