如何遍历HTML文档中的XML?

问题描述:

我需要离线保存数据,所以我将数据保存为XML。我不知道如何使用JavaScript获取XML对象。如何遍历HTML文档中的XML?

<xml id=xmlData> 
     <data> 
      <tb1> 
       <id>1</id> 
       <name>1</name> 
      </tb1> 
      <tb1> 
       <id>2</id> 
       <name>2</name> 
      </tb1> 
     </data> 
    </xml> 
    <html id="MainForm"> 
    <head id="Head1"> 

    </head> 
    <body> 
    <script type="text/javascript"> 
    var xmlDoc; 
    // code for IE 
    if (window.ActiveXObject) 
    { 
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
    } 
    // code for Mozilla, Firefox, Opera, etc. 
    else if (document.implementation.createDocument) 
    { 
    xmlDoc=document.implementation.createDocument("","",null); 
    } 
    else 
    { 
    alert('Your browser cannot handle this script'); 
    } 
    xmlDoc.async=false; 
    xmlDoc.load("");//how can i get the xml? 

    var x=xmlDoc.documentElement.childNodes; 

    for (var i=0;i<x.length;i++) 
    { 
    if (x[i].nodeType==1) 
     { 
     //Process only element (nodeType 1) nodes 
     document.write(x[i].nodeName + ": "); 
     document.write(x[i].childNodes[0].nodeValue); 
     document.write("<br />"); 
     } 
    } 
    </script> 
    </body> 
    </html> 
+0

这不会保存任何离线状态以及无效的XML ......您必须使用Cookie或[localStorage](http://www.w3schools.com/html/html5_webstorage.asp)。 – Kiruse 2013-05-06 04:42:24

+0

你可以使用javascript变量将xml存储为字符串,并在需要时解析它。这个变量可以存储在localStorage中。 – Sandeep 2013-05-06 04:52:32

+0

如果像xmlDoc.load(“文件名”)一样写入,则可以加载文档;在online.using上面的代码不能存储数据在离线。为此,你应该与本地存储概念.compare到cookie本地存储是最好的选择。 – 2013-05-06 04:55:36

试试这个:

var txt='<xml id=xmlData><data><tb1><id>1</id> <name>1</name></tb1><tb1><id>2</id><name>2</name></tb1></data></xml>'; 

if (window.DOMParser) 
{ 
    parser=new DOMParser(); 
    xmlDoc=parser.parseFromString(txt,"text/xml"); 
} 
else // Internet Explorer 
{ 
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
    xmlDoc.async=false; 
    xmlDoc.loadXML(txt); 
} 
var x=xmlDoc.documentElement.childNodes; 

for (var i=0;i<x.length;i++) 
{ 
    if (x[i].nodeType==1) 
    { 
     //Process only element (nodeType 1) nodes 
     console.log(x[i].nodeName + ": "); 
     console.log(x[i].childNodes[0].nodeValue); 
     console.log("<br />"); 
    } 
} 

小提琴:http://jsfiddle.net/hB5E9/

+0

谢谢你的回答~~~我会尽力的 – 2013-05-06 06:46:25

我在文档中使用局部变量来做到这一点。如果你可以将XML作为一个对象的字符串属性,那么这可能是有用的 -

我在我的应用程序中有一些类似的用法。我通过服务调用从SQL Azure DB中读取了一个“XML”列,并将此XML数据作为服务返回对象的“字符串”属性。

下面是我在做阅读的是什么:

_LocalVariable= XMLFromString(DataObject.Filter); 
        $.each($(_LocalVariable).find("Filter"), 
         function (index,filterDataItem) { 
         $filterDataItem =$(filterDataItem); 
         var tFilterType =$filterDataItem.find("FilterType").attr("class"); 
         var tOperator = $filterDataItem.find("Operator").attr("class"); 
         var tValue = $filterDataItem.find("Value").text(); 
         // Do more operations 
        }); 


//-------------------------------------------------------------------------------- 
//Parse XML from String 
//-------------------------------------------------------------------------------- 
function XMLFromString(pXMLString) { 
    if (!pXMLString) 
     pXMLString = "<FilterRule></FilterRule>"; 
    if (window.ActiveXObject) { 
     var oXML = new ActiveXObject("Microsoft.XMLDOM"); 
     oXML.loadXML(pXMLString); 
     return oXML; 
    } else { 
     return (new DOMParser()).parseFromString(pXMLString, "text/xml"); 
    } 
    } 

当我在数据库中的XML是这样的 -

<FilterRule> 
    <Filter id="1"> 
    <FilterType id="AB11">Ranking</FilterType> 
    <Operator id="1">Equal To</Operator> 
    <Value>1</Value> 
    </Filter> 
    <Filter id="2"> 
    <FilterType id="AB22">Segment</FilterType> 
    <Operator id="1">Equal To</Operator> 
    <Value>2</Value> 
    </Filter> 
    <Logic>Or</Logic> 
</FilterRule>