What is the DOM?
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.
What is the HTML DOM?
The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.
If you want to study the HTML DOM, find the HTML DOM tutorial on our Home page.
What is the XML DOM?
The XML DOM is:
A standard object model for XML
A standard programming interface for XML
Platform- and language-independent
A W3C standard
The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them.
In other words: The XML DOM is a standard for how to get, change, add, or delete XML elements.
DOM Nodes
According to the DOM, 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
DOM Example
Look at the following XML file (books.xml):
<?xml version="1.0" encoding="ISO-8859-1"?>
<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>
<price>29.99</price>
</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>
<price>49.99</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
The root node in the XML above is named <bookstore>. All other nodes in the document are contained within <bookstore>.
The root node <bookstore> holds four <book> nodes.
The first <book> node holds four nodes: <title>, <author>, <year>, and <price>, which contains one text node each, "Everyday Italian",
"Giada De Laurentiis", "2005", and "30.00".
Text is Always Stored in Text Nodes
A common error in DOM processing is to expect an element node to contain text.
However, the text of an element node is stored in a text node.
In this example: <year>2005</year>, the element node <year>, holds a text node with the value "2005".
"2005" is not the value of the <year> element!
XSLT Example
<?xml version="1.0"?>
<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>
CSS = Style Sheets for HTML
HTML uses predefined tags, and the meaning of each tag is well understood.
The <table> tag in HTML defines a table - and a browser knows how to display it.
Adding styles to HTML elements are simple. Telling a browser to display an element in a special font or color, is easy with CSS.
XSL = Style Sheets for XML
XML does not use predefined tags (we can use any tag-names we like), and therefore the meaning of each tag is not well understood.
A <table> tag could mean an HTML table, a piece of furniture, or something else - and a browser does not know how to display it.
XSL describes how the XML document should be displayed!
XSL - More Than a Style Sheet Language
XSL consists of three parts:
XSLT - a language for transforming XML documents
XPath - a language for navigating in XML documents
XSL-FO - a language for formatting XML documents
XSLT Introduction
« Previous Next Chapter »
XSLT is a language for transforming XML documents into XHTML documents or to other XML documents.
XPath is a language for navigating in XML documents.
What You Should Already Know
Before you continue you should have a basic understanding of the following:
HTML / XHTML
XML / XML Namespaces
XPath
If you want to study these subjects first, find the tutorials on our Home page.
What is XSLT?
XSLT stands for XSL Transformations
XSLT is the most important part of XSL
XSLT transforms an XML document into another XML document
XSLT uses XPath to navigate in XML documents
XSLT is a W3C Recommendation
XSLT = XSL Transformations
XSLT is the most important part of XSL.
XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like
HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element.
With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests
and make decisions about which elements to hide and display, and a lot more.
A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-tree.
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">
or:
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
To get access to the XSLT elements, attributes and features we must declare the XSLT namespace at the top of the document.
The xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. If you use this namespace, you must
also include the attribute version="1.0".
Start with a Raw XML Document
We want to transform the following XML document ("cdcatalog.xml") into XHTML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<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>
Viewing XML Files in Firefox and Internet Explorer: Open the XML file (typically by clicking on a link) - The XML document will be
displayed with color-coded root and child elements. A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or
collapse the element structure. To view the raw XML source (without the + and - signs), select "View Page Source" or "View Source" from the
browser menu.
Viewing XML Files in Netscape 6: Open the XML file, then right-click in XML file and select "View Page Source". The XML document will
then be displayed with color-coded root and child elements.
Viewing XML Files in Opera 7: Open the XML file, then right-click in XML file and select "Frame" / "View Source". The XML document will be
displayed as plain text.
View "cdcatalog.xml"
Create an XSL Style Sheet
Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation template:
<?xml version="1.0" encoding="ISO-8859-1"?>
<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>
View "cdcatalog.xsl"
Link the XSL Style Sheet to the XML Document
Add the XSL style sheet reference to your XML document ("cdcatalog.xml"):
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
cd>
<title>Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
.
.
</catalog>
If you have an XSLT compliant browser it will nicely transform your XML into XHTML.
View the result
My CD Collection
Title Artist
Empire Burlesque Bob Dylan
Hide your heart Bonnie Tyler
XLink and XPointer Introduction
« Previous Next Chapter »
XLink defines a standard way of creating hyperlinks in XML documents.
XPointer allows the hyperlinks to point to more specific parts (fragments) in the XML document.
What You Should Already Know
Before you continue you should have a basic understanding of the following:
HTML / XHTML
XML / XML Namespaces
XPath
If you want to study these subjects first, find the tutorials on our Home page.
What is XLink?
XLink is short for XML Linking Language
XLink is used to create hyperlinks in XML documents
Any element in an XML document can behave as a link
XLink supports simple links (like HTML) and extended links (for linking multiple resources
together)
With XLink, the links can be defined outside the linked files
XLink is a W3C Recommendation
What is XPointer?
XPointer is short for XML Pointer Language
XPointer allows the links to point to specific parts of an XML document
XPointer uses XPath expressions to navigate in the XML document
XPointer is a W3C Recommendation
XLink and XPointer are W3C Recommendations
The XML Linking Language (XLink) became a W3C Recommendation 27. June 2001.
The XML Pointer Language (XPointer) became a W3C Recommendation 25. March 2003.
You can read more about XML standards in our W3C tutorial.
XLink and XPointer Browser Support
The browser support for XLink and XPointer is minimal.
There is some XLink support in Mozilla 0.98+ and Internet Explorer 6.0+. Earlier versions of these browsers have no XLinks support at all!
XLink Syntax
In HTML, we know (and all the browsers know!) that the <a> element defines a hyperlink. However, this is not how it works with XML. In
XML documents, you can use whatever element names you want - therefore it is impossible for browsers to predict what hyperlink elements
will be called in XML documents.
The solution for creating links in XML documents was to put a marker on elements that should act as hyperlinks.
Below is a simple example of how to use XLink to create links in an XML document:
<?xml version="1.0"?>
<homepages xmlns:xlink="http://www.w3.org/1999/xlink">
<homepage xlink:type="simple"
xlink:href="http://www.w3schools.com">Visit W3Schools</homepage>
<homepage xlink:type="simple"
xlink:href="http://www.w3.org">Visit W3C</homepage>
</homepages>
To get access to the XLink attributes and features we must declare the XLink namespace at the top of the document.
The XLink namespace is: "http://www.w3.org/1999/xlink".
The xlink:type and the xlink:href attributes in the <homepage> elements define that the type and href attributes come from the xlink
namespace.
The xlink:type="simple" creates a simple, two-ended link (means "click from here to go there"). We will look at multi-ended (multidirectional)
links later.
XPointer Syntax
In HTML, we can create a hyperlink that either points to an HTML page or to a bookmark inside an HTML page (using #).
Sometimes it is more useful to point to more specific content. For example, let's say that we want to link to the third item in a particular list,
or to the second sentence of the fifth paragraph. This is easy with XPointer.
If the hyperlink points to an XML document, we can add an XPointer part after the URL in the xlink:href attribute, to navigate (with an XPath
expression) to a specific place in the document.
For example, in the example below we use XPointer to point to the fifth item in a list with a unique id of "rock":
href="http://www.example.com/cdlist.xml#id('rock').child(5,item)"
The XML Example Document
Look at the following XML document, "bookstore.xml", that represents a few books:
<?xml version="1.0" encoding="ISO-8859-1"?>
<bookstore xmlns:xlink="http://www.w3.org/1999/xlink">
<book title="Harry Potter">
<description
xlink:type="simple"
xlink:href="http://book.com/images/HPotter.gif"
xlink:show="new">
As his fifth year at Hogwarts School of Witchcraft and
Wizardry approaches, 15-year-old Harry Potter is.......
</description>
</book>
<book title="XQuery Kick Start">
<description
xlink:type="simple"
xlink:href="http://book.com/images/XQuery.gif"
xlink:show="new">
XQuery Kick Start delivers a concise introduction
to the XQuery standard.......
</description>
</book>
</bookstore>
View the "bookstore.xml" file in your browser
