XML Notes

Here is a list of technologies you should try to avoid when using XML.

Internet Explorer - XML Data Islands

What is it?XML data islands are XML data embedded into HTML pages.

Why should you avoid using it?XML data islands only work in Internet Explorer browsers.

What to use instead?You should use JavaScript and XML DOM in HTML to parse and display XML.

For more information about JavaScript and XML DOM, please visit ourXML 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 the identifier of the data island, and the src attribute points to the XML file:

Example

This example only works in IE browsers

<html>
<body>

<xml id="cdcat" src="cd_catalog.xml.html"></xml>

<table border="1" datasrc="../index.html">
<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> tag allows the datafld attribute to reference the XML elements to be displayed. In this example, "ARTIST" and "TITLE" are referenced. When the XML is read, a corresponding table row is created for each <CD> element.

Internet Explorer - Behaviors

What is it?Internet Explorer 5 introduced behaviors. Behaviors are a method of adding behaviors to XML (or HTML) elements using CSS styles.

Why should you avoid using it?Only Internet Explorer supports the behavior attribute.

What to use instead?Use JavaScript and XML DOM (or HTML DOM) instead.

Example 1 - Mouse Hover Highlight

The <style> element in the following HTML file 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>

Below is the XML document "behave.htc" (this file contains a piece of JavaScript and event handlers for the element):

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

Try it Yourself »

Example 2 - Typewriter Simulation

The <style> element in the following HTML file defines a behavior for the element with id "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>

Below is the XML document "typing.htc":

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

Try it Yourself »

Other Extensions