XML Basic
XML HOME XML Introduction XML How to use XML Tree XML Syntax XML Elements XML Attributes XML Validation XML Validator XML Viewing XML CSS XML XSLTXML JavaScript
XML HTTP Request XML Parser XML DOM XML in HTML XML ApplicationsXML Advanced
XML Namespaces XML CDATA XML Encoding XML Server XML DOM Advanced XML Don't XML Technologies XML in Real Life XML Editors XML E4X XML SummaryXML Examples
XML Examples XML Quiz XML CertificateXML Don't
Here are some technologies you should try to avoid when using XML.
Internet Explorer - XML Data Islands
What is it? An XML data island is XML data embedded into an HTML page.
Why avoid it? XML Data Islands only works with Internet Explorer browsers.
What to use instead? You should use JavaScript and XML DOM to parse and display XML in HTML.
For more information about JavaScript and XML DOM, visit our XML DOM tutorial.
XML Data Island Example
This example uses the XML document "cd_catalog.xml".
Bind the XML document to an <xml> tag in the HTML document. The id attribute defines an id for the data island, and the src attribute points to the XML file:
Example
This example only works in IE
<html>
<body>
<xml id="cdcat" src="cd_catalog.xml"></xml>
<table border="1" datasrc="#cdcat">
<tr>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="TITLE"></span></td>
</tr>
</table>
</body>
</html>
<body>
<xml id="cdcat" src="cd_catalog.xml"></xml>
<table border="1" datasrc="#cdcat">
<tr>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="TITLE"></span></td>
</tr>
</table>
</body>
</html>
Try it yourself »
The datasrc attribute of the <table> tag binds the HTML table to the XML data island.
The <span> tags allow the datafld attribute to refer to the XML element to be displayed. In this case, "ARTIST" and "TITLE". As the XML is read, additional rows are created for each <CD> element.
Internet Explorer - Behaviors
What is it? Internet Explorer 5 introduced behaviors. Behaviors are a way to add behaviors to XML (or HTML) elements with the use of CSS styles.
Why avoid it? The behavior attribute is only supported by Internet Explorer.
What to use instead? Use JavaScript and XML DOM (or HTML DOM) instead.
Example 1 - Mouseover Highlight
The following HTML file has a <style> element that defines a behavior for the <h1> element:
<html>
<head>
<style type="text/css">
h1 { behavior: url(behave.htc) }
</style>
</head>
<body>
<h1>Mouse over me!!!</h1>
</body>
</html>
<head>
<style type="text/css">
h1 { behavior: url(behave.htc) }
</style>
</head>
<body>
<h1>Mouse over me!!!</h1>
</body>
</html>
The XML document "behave.htc" is shown below (The file contains a JavaScript and event handlers for the elements):
<attach for="element" event="onmouseover" handler="hig_lite" />
<attach for="element" event="onmouseout" handler="low_lite" />
<script>
function hig_lite()
{
element.style.color='red';
}
function low_lite()
{
element.style.color='blue';
}
</script>
<attach for="element" event="onmouseout" handler="low_lite" />
<script>
function hig_lite()
{
element.style.color='red';
}
function low_lite()
{
element.style.color='blue';
}
</script>
Try it yourself »
Example 2 - Typewriter Simulation
The following HTML file has a <style> element that defines a behavior for elements with an id of "typing":
<html>
<head>
<style type="text/css">
#typing
{
behavior:url(typing.htc);
font-family:'courier new';
}
</style>
</head>
<body>
<span id="typing" speed="100">IE5 introduced DHTML behaviors.
Behaviors are a way to add DHTML functionality to HTML elements
with the ease of CSS.<br /><br />How do behaviors work?<br />
By using XML we can link behaviors to any element in a web page
and manipulate that element.</p>v </span>
</body>
</html>
<head>
<style type="text/css">
#typing
{
behavior:url(typing.htc);
font-family:'courier new';
}
</style>
</head>
<body>
<span id="typing" speed="100">IE5 introduced DHTML behaviors.
Behaviors are a way to add DHTML functionality to HTML elements
with the ease of CSS.<br /><br />How do behaviors work?<br />
By using XML we can link behaviors to any element in a web page
and manipulate that element.</p>v </span>
</body>
</html>
The XML document "typing.htc" is shown below:
<attach for="window" event="onload" handler="beginTyping" />
<method name="type" />
<script>
var i,text1,text2,textLength,t;
function beginTyping()
{
i=0;
text1=element.innerText;
textLength=text1.length;
element.innerText="";
text2="";
t=window.setInterval(element.id+".type()",speed);
}
function type()
{
text2=text2+text1.substring(i,i+1);
element.innerText=text2;
i=i+1;
if (i==textLength)
{
clearInterval(t);
}
}
</script>
<method name="type" />
<script>
var i,text1,text2,textLength,t;
function beginTyping()
{
i=0;
text1=element.innerText;
textLength=text1.length;
element.innerText="";
text2="";
t=window.setInterval(element.id+".type()",speed);
}
function type()
{
text2=text2+text1.substring(i,i+1);
element.innerText=text2;
i=i+1;
if (i==textLength)
{
clearInterval(t);
}
}
</script>
Try it yourself »
W3Schools' Online Certification
The perfect solution for professionals who need to balance work, family, and career building.
More than 10 000 certificates already issued!
The HTML Certificate documents your knowledge of HTML.
The HTML5 Certificate documents your knowledge of advanced HTML5.
The CSS Certificate documents your knowledge of advanced CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The jQuery Certificate documents your knowledge of jQuery.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
