Javascript 和 XML - 未捕获的类型错误：无法读取未定义的属性“childNodes”答案

【问题标题】：Javascript and XML - Uncaught TypeError: Cannot read property 'childNodes' of undefinedJavascript 和 XML - 未捕获的类型错误：无法读取未定义的属性“childNodes”
【发布时间】：2015-11-01 22:01:01
【问题描述】：

我正在尝试创建一个从 XML 文件中提取并在表格中显示信息的 Web 应用程序。我拥有的 XML 文件是从 PHP 脚本生成的。我遇到的问题是数据没有显示在表格中，当我检查谷歌浏览器开发控制台时，它说我有错误：

未捕获的类型错误：无法读取未定义的属性“childNodes” 第 37 行。

这是我正在尝试使用的代码

<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse:collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>
<body onload="init()">

<script>
function init(){
  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","http://hankyranky.com/dev/includes/reviewxml.gen.php?bathroomid=1",false);
  xmlhttp.send();
  xmlDoc=xmlhttp.responseXML;

  document.write("<table><tr><th>Artist</th><th>Title</th></tr>");
  var x=xmlDoc.getElementsByTagName("review");
  for (i=0;i<x.length;i++)
    {
    document.write("<tr><td>");
    document.write(x[i].getElementsByTagName("bathroomid")[0].childNodes[0].nodeValue);
    document.write("</td><td>");
    document.write(x[i].getElementsByTagName("rating")[0].childNodes[0].nodeValue);
    document.write("</td></tr>");
    }
  document.write("</table>");
}
</script>

</body>
</html>

这是 XML 文件的输出：

<ratings>
  <rating>
    <id>1</id>
    <bathroomid>1</bathroomid>
    <review>5</review>
  </rating>
  <rating>
    <id>2</id>
    <bathroomid>1</bathroomid>
    <review>4</review>
  </rating>
</ratings>

如果有人需要，这里是 XML 生成器的代码

<?php

require("db.config.php");

// Start XML file, create parent node

$xml = new SimpleXMLElement('<ratings/>');
$bathroomid = ($_GET['bathroomid']);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the bathrooms table

$query = "SELECT * FROM ratings WHERE bathroomid = '".$bathroomid."'";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  $rating = $xml->addChild('rating');
  $rating->addChild('id', $row['id']);
  $rating->addChild('bathroomid', $row['bathroomid']);
  $rating->addChild('review', $row['rating']);
}



echo $xml->saveXML();

?>

谢谢大家，非常感谢帮助！

【问题讨论】：

看起来像是 XSLT 的工作...... ;-)

标签： javascript php mysql xml

【解决方案1】：

像bathroomid 和review 这样的标签是rating 元素的子元素，而不是review 元素的子元素，所以x[i].getElementsByTagName("bathroomid") 不会返回任何元素。

这些都是rating 元素的子元素，所以像这样迭代那个元素

var x=xmlDoc.getElementsByTagName("rating");

【讨论】：

做到了！非常感谢，只要 stackoverflow 允许我，我就会将其标记为答案，因此大约需要 8 分钟。非常感谢！

【解决方案2】：

看起来您在 Javascript 中混淆了 rating 和 review 元素。以下代码块：

var x=xmlDoc.getElementsByTagName("review");
  for (i=0;i<x.length;i++) {
    document.write("<tr><td>");
    document.write(x[i].getElementsByTagName("bathroomid")[0].childNodes[0].nodeValue);
    document.write("</td><td>");
    document.write(x[i].getElementsByTagName("rating")[0].childNodes[0].nodeValue);
    document.write("</td></tr>");
}

应该是：

var x=xmlDoc.getElementsByTagName("rating");
  for (i=0;i<x.length;i++) {
    document.write("<tr><td>");
    document.write(x[i].getElementsByTagName("bathroomid")[0].childNodes[0].nodeValue);
    document.write("</td><td>");
    document.write(x[i].getElementsByTagName("review")[0].childNodes[0].nodeValue);
    document.write("</td></tr>");
}

【讨论】：