<JS：The Definitive Guide > JavaScript 和 XML

布满荆棘的人生 2021-11-29 05:10 134阅读 0赞

创建一个空的XML文档：

从xml中提取信息

address.xml:

<?xml version="1.0"?>
    <contacts>
    <contact name="Able Bake"><email>able@example.com</email></contact>
    <contact name="Careful Dodger"><email>dodger@example.com</email></contact>
    <contact name="Eager Framer" personal="true"><email>frame@example.com</email></contact>
    </contacts

HTML:

<!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    function makeTable(xmldoc,schema,element){
          
    var table=document.createElement("table");
    //Create the header row of <th> elements in a <tr> in a <thead>
    var thead=document.createElement("thead");
    var header=document.createElement("tr");
    for(var i=0;i<schema.columns.length;i++){
          
    var c=schema.columns[i];
    var label=(typeof c=="string")?c:c.label;
    var cell=document.createElement("th");
                            cell.appendChild(document.createTextNode(label));
                            header.appendChild(cell);
                 }
                 thead.appendChild(header);
                 table.appendChild(thead);
    //The remaining rows of of the table go in a <tbody>
    var tbody=document.createElement("tbody");
                 table.appendChild(tbody);
    
    //Now get the elements that contain our data from the xml document
    var xmlrows=xmldoc.getElementsByTagName(schema.rowtag);  //xmlrows is a array
            
    //Loop through these elements .Each one contains a row of the table
    for(var r=0;r<xmlrows.length;r++){
          
    //This is the XML element that holds the data for the row
    var xmlrow=xmlrows[r];
    //Create an HTML element to Display the data for the rowtag
    var row=document.createElement("tr");
    
    //Loop through the columns secified by the schema object
    for(var c=0;c<schema.columns.length;c++){
          
    var sc=schema.columns[c];
    var tagname=(typeof sc=="string")?sc:sc.tagname;
    var celltext;
    if(tagname.charAt(0)=='@'){
          
    //if the tagname begins with '@',it is an attribute name
                                    celltext=xmlrow.getAttribute(tagname.substring(1));
                                }
    else{
          
    //Find the XML element that holds the data for this columns
    var xmlcell=xmlrow.getElementsByTagName(tagname)[0];
    //Assume that element has a text node as its first child
    var celltext=xmlcell.firstChild.data;
                                }
    var cell=document.createElement("td");
                                cell.appendChild(document.createTextNode(celltext));
    //Add the cell to the row
                                row.appendChild(cell);
                     }
                     tbody.appendChild(row);
                 }
    
                 table.frame="border";
    if(typeof element=="string") element=document.getElementById(element);
                 element.appendChild(table);
             }
    
    
    
    function displayAddressBook(){
          
    var schema={
          
                   rowtag:"contact",
                     columns:[
                              {tagname:"@name",label:"Name"},
                  {tagname:"@email",label:"Address"}
                                         ]
                };
    var xmlDoc;
    if (window.ActiveXObject)
                {
          
    // code for IE
                    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
                }
    else if (document.implementation.createDocument)
                {
          
    // code for Firefox, Mozilla, Opera, etc.
                    xmlDoc=document.implementation.createDocument("","",null);
                }
    else
                {
          
                    alert('Your browser cannot handle this script');
                }
                xmlDoc.async=false;
                xmlDoc.load("address.xml");  //Read the XML data
                makeTable(xmlDoc,schema,"addresses");
            }
    </script>
    </head>
    <body>
    <BUTTON onclick="displayAddressBook()">Display Address Book</BUTTON>
    <div id="addresses"></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/Jason-Damon/archive/2011/12/01/2270100.html