Question

这个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，并希望了解如何遍历两种语言的节点。

感谢。

Answer 1

问题可能在于浏览器如何实现DOM规范，Firefox＆amp; co。尊重标准规范并包括用于换行符，空格等的附加textNodes，大多数IE版本偏离标准并且仅包含您拥有的元素节点（我猜你应该发生的那样）。

我认为您可以使用 node.getElementsByTagName（'*'）来仅获取当前节点的Element子节点; 更准确地说，

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获取更多文档。

Answer 2

空格也可以（取决于UA）被检测为节点（textNodes）使用getElementsByTagName（）也可以访问节点而不是childNodes。

或跳过除elementNodes之外的所有内容：

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

Answer 3

我放弃了尝试使用Javascript执行此操作。我使用PHP完成了所有XML文件更新。无论如何，这似乎是更新文件的正确方法。

遍历XML节点PHP与Javascript

3 个答案: