Scripting Internet Explorer XML Data Islands | JavaScript: The Complete Reference, Second Edition

As mentioned earlier in the chapter, Microsoft Internet Explorer provides for data islands using the << xml >> tag so that XML data can be easily embedded into an (X)HTML document. To manipulate the XML in the data island, we just access the element s content by its set id value, say, myIsland . We can use the document.all[] collection to access the element and assign it to the identifier xmldoc as used in the first IE- related XML example. We can now use this identifier as we have done before. For example, to get the root node we would access xmldoc.documentElement . The add/delete record example is presented here for the final time written using data binding.

 <<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <<html xmlns="http://www.w3.org/1999/xhtml">> <<head>> <<title>>Employee Directory using XML Data Islands<</title>> <<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />> <</head>> <<body>> <<xml id="myIsland" src="staff.xml">><</xml>> <<h1 align="center">>DemoCompany Directory<</h1>> <<hr />> <<table width="100%" datasrc="#myIsland">> <<thead>>       <<tr>>             <<th>>Name<</th>>             <<th>>Title<</th>>             <<th>>Phone<</th>>             <<th>>Email<</th>>       <</tr>> <</thead>> <<tbody>>       <<tr>>             <<td>><<span datafld="name">><</span>><</td>>              <<td>><<span datafld="title">><</span>><</td>>              <<td>><<span datafld="phone">><</span>><</td>>              <<td>><<span datafld="email">><</span>><</td>>        <</tr>> <</tbody>> <</table>> <<script type="text/jscript">> <<!-- /* associate the XML document from the data island */ xmldoc = myIsland;   function deleteLastElement() {   /* find root element and delete its last child */   var rootElement = xmldoc.documentElement;   if (rootElement.hasChildNodes())       rootElement.removeChild(rootElement.lastChild); } function addElement()  {    var rootElement = xmldoc.documentElement;        /* create employee element*/    var newEmployee = xmldoc.createElement('employee');        /* create child elements and text values and append one by one */     var newName = xmldoc.createElement('name');     var newNameText = xmldoc.createTextNode(document.myform.namefield.value);        newName.appendChild(newNameText);       newEmployee.appendChild(newName);          var newTitle = xmldoc.createElement('title');     var newTitleText = xmldoc.createTextNode(document.myform.titlefield.value);     newTitle.appendChild(newTitleText);     newEmployee.appendChild(newTitle);        var newPhone = xmldoc.createElement('phone');     var newPhoneText = xmldoc.createTextNode(document.myform.phonefield.value);       newPhone.appendChild(newPhoneText);       newEmployee.appendChild(newPhone);             var newEmail = xmldoc.createElement('email');     var newEmailText = xmldoc.createTextNode(document.myform.emailfield.value);     newEmail.appendChild(newEmailText);     newEmployee.appendChild(newEmail);             /* append completed record to the document */       rootElement.appendChild(newEmployee);   } //-->> <</script>> <<form action="#" method="get" id="myform" name="myform">> Name: <<input type="text" name="namefield" id="namefield" size="50" />><<br />> Title: <<input type="text" name="titlefield" id="titlefield" size="30" />> <<br />> Phone: <<input type="text" name="phonefield" id="phonefield" size="20" />> <<br />> Email: <<input type="text" name="emailfield" id="emailfield" size="20" />> <<br />> <<input type="button" value="add record" onclick="addElement();" />> <<input type="button" value="delete last record"  onclick="deleteLastElement();" />> <</form>> <</body>> <</html>>

Besides data islands, you will find that Internet Explorer has a very powerful set of tools to interact with XML documents, many of which are based on W3C and the DOM standards. A few of the objects you would encounter include XMLDOMDocument , XMLDOMNode , XMLDOMNodeList , and XMLDOMNamedNodeMap , among others. If you are familiar with the DOM from previous discussions, you can pretty much guess what these objects properties and methods would be. We ve already covered them in Chapter 10. As always, see Microsoft s MSDN site for complete information ( msdn.microsoft.com ).

Note	There are numerous articles about providing data island support in Mozilla that can be found online if readers are inclined to adopt this proprietary technology for a public Web site.