Javascript 从 REST 循环遍历 XML

Question

如何使用 javascript 遍历上层标签的不同子标签并将标签名和值打印到 HTML。一个简短的例子

<Product>
   <Books>
      <Genere>
         <Sport>
            <Name>Book A</Name>
             <Name>Book B</Name>
             <Name>Book C</Name>
          </Sport>
       <Genere>
         <History> 
           <Name>Book A</Name>
           <Name>Book B</Name>
           <Name>Book C</Name>
         </History>
      </Genere>
    </Books>
  <Product>

假设我想按以下方式打印 6 本书的名称:

名称:书A名称:书B名称:书C

名称:书A名称:书B名称:书C

我查看了 W3C 示例，但它们并没有多大帮助。

Answer 1

首先，您需要将 XML 字符串解析为 XMLDOM 对象。然后，您可以使用该对象的各种方法和属性来导航节点并获取所需的数据。我在下面添加了一个示例。请注意，您的数据中缺少结束标记(第一个 <Genere> 节点)。

//Function to parse XML string into an xml dom object
var parseXML = function(text){
  var xmlDoc;
  if (window.DOMParser){
      var parser = new DOMParser();
      xmlDoc = parser.parseFromString(text, "text/xml");
  } else {
      // Internet Explorer
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      xmlDoc.async = false;
      xmlDoc.loadXML(text);
  }
  return xmlDoc;
}
//Function to get child nodes by name
var getChildrenByName = function(node, name){
  var childNodes = node.childNodes, matchingNodes = [];
  for(var i=0; i<childNodes.length; ++i){
    if(childNodes[i].nodeType !== Node.TEXT_NODE && childNodes[i].tagName == name){
      matchingNodes.push(childNodes[i]);
    }
  }
  return matchingNodes;
}

//Test data
var data = '<Product><Books><Genere><Sport><Name>Book A</Name><Name>Book B</Name><Name>Book C</Name></Sport></Genere><Genere><History><Name>Book A</Name><Name>Book B</Name><Name>Book C</Name></History></Genere></Books><Product>'

//Execute parse
var doc = parseXML(data);

//Get Product node
var product = doc.firstChild;

//Get Books node
var books = getChildrenByName(product, 'Books')[0];

//Get genres
var genres = getChildrenByName(books, 'Genere');

//Loop through genres
var str = '';
for(var i=0; i<genres.length; ++i){
  var genre = genres[i].firstChild;
  str += '<h2>'+genre.tagName+'</h2>';
  //Get book names
  var bookNames = getChildrenByName(genre, 'Name');
  //Loop book names
  for(var j=0; j<bookNames.length; ++j){
    str += bookNames[j].textContent + '<br>';
  }
}

document.body.innerHTML = str;