accessing xml childnodes using javascript

Since there is no Recommendation yet for the xlinks, I made a javascript that can access the child nodes and make it "Linkable"
to any data entered in the xml Document. This may sound a little bit "queasy". But here goes: - Created: Sunday, October 08, 2000.

 - "XLINK" Sample.

 - Accessing xml child nodes using javascript.

 - Use IE 5.0 only. Other Browsers:not tested.

__________________________________________________
1. DTD Shema ( .dtd ) - to be saved as links.dtd

<!ELEMENT Links (Directory+)>
<!ELEMENT Directory (Profile+)>
<!ATTLIST Directory
  of CDATA #REQUIRED>
<!ELEMENT Profile (Name,Url,Description)>     
<!ELEMENT Name (#PCDATA)>
<!ELEMENT Url (#PCDATA)>             
<!ELEMENT Description (#PCDATA)>


__________________________________________________
2. XML Document ( .xml ) to be saved as links.xml

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE Links SYSTEM "links.dtd">
<Links>
  <Directory of="A">
    <Profile>
      <Name>Axis</Name>
      <Url>http://www.axis.com</Url>
      <Description>n/a</Description>
    </Profile>
    <Profile>
      <Name>Art</Name>
      <Url>http://www.art.com</Url>
      <Description>n/a</Description>
    </Profile>
  </Directory> 
  <Directory of="B">
    <Profile>
      <Name>Box</Name>
      <Url>http://www.box.com</Url>
      <Description>n/a</Description>
    </Profile>
    <Profile>
      <Name>Base</Name>
      <Url>http://www.base.com</Url>
      <Description>n/a</Description>
    </Profile>
  </Directory>
</Links>


__________________________________________________
3. CSS Document ( .css ) - to be saved as links.css

body{
  background-color:#000000;  
  color:#FFFFFF;
  }
  
a{text-decoration:none;}
a:hover{color:#FF3300;}

.def{
  font-family:verdana,arial,helvetica;
  font-size:7.5pt;
  color:#FFFFFF;
  }


__________________________________________________
4. HTML Document ( .html ) - to be saved as links.html

<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="links.css">
</head>

<body>
<xml id="xmlDoc" src="links.xml"></xml> 
<table width="700" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr valign="top">
    <td class="def" width="75" height="20" bgcolor="#6699FF" align="center" valign="middle">
      Directory: <span datasrc="#xmldoc" datafld="of"></span>
    </td>   
    <td class="def" width="50" height="20" bgcolor="#6699FF" align="center" valign="middle">
      <input class="def" type="button" value="<" onclick="xmlDoc.recordset.moveprevious()">
      <input class="def" type="button" value=">" onclick="xmlDoc.recordset.movenext()">
    </td>
      <td class="def" width="125" height="20" bgcolor="#6699FF" align="left" valign="middle"></td>
      <td class="def" width="350" height="20" bgcolor="#6699FF" align="left" valign="middle"></td> 
  </tr>
</table>
<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr valign="top">
    <td class="def" width="150" height="15" bgcolor="#000000" align="left" valign="middle">  Name:</td>
    <td class="def" width="225" height="15" bgcolor="#000000" align="left" valign="middle">  Url:</td>
    <td class="def" width="325" height="15" bgcolor="#000000" align="left" valign="middle">  Description:</td>   
  </tr>
</table>
<table DATASRC="#xmlDoc" DATAFLD="Profile" width="700" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr valign="top">    
    <td class="def" width="150" height="15" bgcolor="#6699FF" align="left" valign="middle">  <SPAN DATAFLD="Name"></SPAN></td>
    <td class="def" width="225" height="15" bgcolor="#6699FF" align="left" valign="middle">

<!-- This is the Javascript -->

 <Script type="text/javascript" language="javascript">
   var url = '<SPAN DATAFLD="Url">';	  
     document.write(' ' + '<a class="def" href=' + url +  url + '</a>');
 </script>	  

<!-- end -->

    </td>
    <td class="def" width="325" height="15" bgcolor="#6699FF" align="left" valign="middle">  <SPAN DATAFLD="Description"></SPAN></td>   
  </tr>
</table>  
</body>

</html>


Resources:

 - MSDN, Data Islands (http://msdn.microsoft.com)
 - W3C, XML Tutorials (http://www.w3.org)
 - NETSCAPE, Javascript Tutorials  (http://devedge.netscape.com)
 - ZVON, DTD Tutorials (http://www.zvon.org)

______________________________________________
FREE Personalized Email at Mail.com
Sign up at http://www.mail.com/?sr=signup

Received on Wednesday, 11 October 2000 20:57:54 UTC