遍历XML节点PHP与Javascript - Traverse XML Nodes PHP vs. Javascript

这个php脚本能够遍历XML文件的节点，以在HTML表中显示数据。我一直试图用javascript做同样的事情，但getElementsbyTagName方法还没有让我到那里。javascript有什么问题?

PHP脚本

<?php
// load SimpleXML
$nodes = new SimpleXMLElement('communities.xml', null, true);
echo <<<EOF
<table>
        <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Top</th>
                <th>Left</th>
                <th>Width</th>
                <th>Height</th>
        </tr>
EOF;
foreach($nodes as $node) // loop through our books
{
        echo <<<EOF
        <tr>
                <td>{$node['ID']}</td>
                <td>{$node->NAME}</td>
                <td>{$node->TOP}</td>
                <td>{$node->LEFT}</td>
                <td>{$node->WIDTH}</td>
                <td>{$node->HEIGHT}</td>
        </tr>
EOF;
}echo '</table>';
?>

Javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","communities.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
y=xmlDoc.getElementsByTagName("COMMUNITIES")[0].childNodes;
n=y.length;
//document.write("n "+n+"<br/>");
for (i=0;i<n;i++)
{
  document.write(y[i].nodeName);
  att=y.item(i).attributes.getNamedItem("ID");
  document.write(att.value + "<br />");
  x=y.item(i).childNodes;
  name=(y[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue);
  /* top =(y[i].getElementsByTagName("TOP")[0].childNodes[0].nodeValue);
  left=(y[i].getElementsByTagName("LEFT")[0].childNodes[0].nodeValue);
  width =(y[i].getElementsByTagName("WIDTH")[0].childNodes[0].nodeValue);
  height=(y[i].getElementsByTagName("HEIGHT")[0].childNodes[0].nodeValue); */
  document.write(name+"<br/>");
  /* document.write(top+"<br/>");
  document.write(left+"<br/>");
  document.write(width+"<br/>");
  document.write(height+"<br/>");*/
}

</script>
</head>
<body>
<div id='show'></div>
</body>
</html>

脚本只运行，如果我不访问节点数据(顶部，左边，宽度，高度)。我注释掉了访问数据的行。

XML数据

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<COMMUNITIES>
<COMMUNITY ID="c001">
  <NAME>Town Services</NAME> 
  <TOP>50</TOP> 
  <LEFT>50</LEFT> 
  <WIDTH>200</WIDTH> 
  <HEIGHT>300</HEIGHT> 
  <URLS>
      <URL ID="U001">
          <NAME>Google.com</NAME>
          <URL>http://www.google.com</URL>
      </URL>
      <URL ID="U002">
          <NAME>Bing.com</NAME>
          <URL>http://www.bing.com</URL>
      </URL>
      <URL ID="U003">
          <NAME>Yahoo.com</NAME>
          <URL>http://www.yahoo.com</URL>
      </URL>
      <URL ID="U004">
          <NAME>Aol.com</NAME>
          <URL>http://www.aol.com</URL>
      </URL>
  </URLS> 
  </COMMUNITY>
<COMMUNITY ID="c002">
  <NAME>Local Stores</NAME> 
  <TOP>50</TOP> 
  <LEFT>260</LEFT> 
  <WIDTH>200</WIDTH> 
  <HEIGHT>150</HEIGHT> 
  <URLS>
      <URL ID="U001">
          <NAME>Walgreens</NAME>
          <URL>http://www.walgreens.com</URL>
      </URL>
      <URL ID="U002">
          <NAME>Bing.com</NAME>
          <URL>http://www.bing.com</URL>
      </URL>
      <URL ID="U003">
          <NAME>Yahoo.com</NAME>
          <URL>http://www.yahoo.com</URL>
      </URL>
  </URLS> 
  </COMMUNITY>
<COMMUNITY ID="c003">
  <NAME>Attractions</NAME> 
  <TOP>50</TOP> 
  <LEFT>470</LEFT> 
  <WIDTH>200</WIDTH> 
  <HEIGHT>300</HEIGHT> 
  <URLS>
      <URL ID="U001">
          <NAME>Museum</NAME>
          <URL>http://www.mfa.org</URL>
      </URL>
      <URL ID="U002">
          <NAME>Park</NAME>
          <URL>http://www.bing.com</URL>
      </URL>
  </URLS> 
  </COMMUNITY>
<COMMUNITY ID="c004">
  <NAME>Online Stores</NAME> 
  <TOP>370</TOP> 
  <LEFT>50</LEFT> 
  <WIDTH>200</WIDTH> 
  <HEIGHT>150</HEIGHT> 
  <URLS>
      <URL ID="U001">
          <NAME>Amazon.com</NAME>
          <URL>http://www.amazon.com</URL>
      </URL>
      <URL ID="U002">
          <NAME>Target.com</NAME>
          <URL>http://www.target.com</URL>
      </URL>
  </URLS> 
  </COMMUNITY>
<COMMUNITY ID="c005">
  <NAME>Online Forums</NAME> 
  <TOP>370</TOP> 
  <LEFT>300</LEFT> 
  <WIDTH>200</WIDTH> 
  <HEIGHT>200</HEIGHT> 
  <URLS>
      <URL ID="U001">
          <NAME>Technet</NAME>
          <URL>http://www.Microsoft.com</URL>
      </URL>
      <URL ID="U002">
          <NAME>MSDN</NAME>
          <URL>http://www.Microsoft.com</URL>
      </URL>
  </URLS> 
  </COMMUNITY>
<COMMUNITY ID="c006">
  <NAME>Travel</NAME> 
  <TOP>370</TOP> 
  <LEFT>480</LEFT> 
  <WIDTH>200</WIDTH> 
  <HEIGHT>200</HEIGHT> 
  <URLS>
      <URL ID="U001">
          <NAME>Southwest</NAME>
          <URL>http://www.mfa.org</URL>
      </URL>
      <URL ID="U002">
          <NAME>Northwest</NAME>
          <URL>http://www.bing.com</URL>
      </URL>
  </URLS> 
  </COMMUNITY>
</COMMUNITIES>

我刚开始研究XML，想了解如何用两种语言遍历节点。

谢谢。

问题可能在于浏览器如何实现DOM规范，Firefox "co。尊重标准规范，并包括额外的textnode换行，空格等，大多数IE版本偏离标准，只包括元素节点(我猜你期望应该发生的)。

我认为你可以使用node. getelementsbytagname ('*')只获得当前节点的元素子节点;更准确地说,

y=xmlDoc.getElementsByTagName("COMMUNITIES")[0];
//only true child element nodes of the communities node
elementChildNodes = y.getElementsbyTagName('*');

如果这不起作用，尝试使用children属性，

y=xmlDoc.getElementsByTagName("COMMUNITIES")[0].children;

您可以访问https://developer.mozilla.org/En/DOM/Element.children获取更多文档

空白空间也可能(取决于UA)被检测为节点(textNodes)。
也可以使用getElementsByTagName()来访问节点，而不是使用childNodes。

或者跳过除elementNodes:

之外的所有内容

for (i=0;i<n;i++)
{
   if(y[i].nodeType!==1){continue;}
   //....
}

我放弃了用Javascript做这件事。我用PHP更新了所有的XML文件。这似乎是更新文件的正确方法。