＜?xml version="1.0" encoding="UTF-8"?>
＜data>
＜pets>
＜pet type="猫" />
＜pet type="狗" />
＜pet type="鱼" />
＜/pets>
＜/data>

你只需要稍微修改一下你的processXML函数，它变成这样子了：

function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var insertData = '＜table style="width:150px; border: solid 1px #000"> ＜tr> ＜th> '
+ 'Pets＜/th> ＜/tr> ';
for (var i=0; i＜dataArrayLen; i++){
insertData += '＜tr> ＜td> ' + dataArray[i].getAttribute('type') + '＜/td> ＜/tr> ';
}
insertData += '＜/table> ';
document.getElementById ('dataArea').innerHTML = insertData;
}

（Sheneyan注：修改后的示例见：附件： example_2_2.htm ，XML文件见：附件： data_2_3.xml ）

关键的不同在于我们通过dataArray[i].getAttribute('type')取得值，它返回了当前＜pet> 节点的“type”属性的值。

继续...

现在我们已经知道了一些从一个单独的XML数据组中取回数据的有效方法，让我们看看如何从多个组中取回数据。和只是列出一个pets所拥有的内容不同，我们假设我们有一个针对我们宠物的日课表。因为它们都有不同的需要，每一只宠物都得仔细的照顾。面对这种情况，动物的看管员需要一个每日依据。现在来让我们将这些放入一个良好格式的XML：

＜?xml version="1.0" encoding="UTF-8"?>
＜data>
＜pets>
＜pet> Cat
＜task> Feed＜/task>
＜task> Water＜/task>
＜task> Comb out fleas＜/task>
＜/pet>
＜pet> Dog
＜task> Feed＜/task>
＜task> Water＜/task>
＜task> Put outside＜/task>
＜/pet>
＜pet> Fish
＜task> Feed＜/task>
＜task> Check oxygen, water purity, etc.＜/task>
＜/pet>
＜/pets>
＜/data>

也许这个看起来很奇怪，但这就是我们正在创建的子组(sub-group)。每一个＜pet> 元素都是一个组＜pets> 的子组，而每一个＜task> 则是每一个＜pet> 组的子元素。

在我继续之前，你也许希望将你的表格用一些css美化一下，比如：

＜style type="text/css"> ＜!--
table, tr, th, td {
border: solid 1px #000;
border-collapse: collapse;
padding: 5px;
}
--> ＜/style>

这让这个表格更容易读取。现在让我们去研究函数processXML：

function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var subAry, subAryLen;
var insertData = '＜table> ＜tr> ＜th> '
+ 'Pets＜/th> ＜th> Tasks＜/th> ＜/tr> ';
for (var i=0; i＜dataArrayLen; i++){
insertData += '＜tr> ＜td> ' + dataArray[i].firstChild.data + '＜/td> ';
subAry = dataArray[i].getElementsByTagName('task');
subAryLen = subAry.length;
insertData += '＜td> ';
for(var j=0; j＜subAryLen; j++){
insertData += subAry[j].firstChild.data;
if( subAryLen != j+1 ) { insertData += ', '; }
}
insertData += '＜/td> ＜/tr> ';
}
insertData += '＜/table> ';
document.getElementById ('dataArea').innerHTML = insertData;
}

新增加的内容，首先是两个新变量的声明：“subAry”和“subAryLen”。它们和之前的变量“dataArray”和“dataArrayLen”类似，除了它们指向不同的数组（特别是它们将指向那些“task”元素－当“dataArray”和“dataArrayLen”指向“pet”元素的时候）。

我们也改变了变量“insertData”的初始值－我们增加了一个表格头（＜th> ）给我们的“tasks”字段。

下一步改变在于循环：我们把值赋给subAry和subAryLen变量。变量subAry成为当前＜pet> 的＜task> 元素的数组。变量subAryLen成为这个数组的长度，直到这个数组发生变化（当外部循环走到下一个＜pet> 时）。

我们创建了一个内嵌的循环来处理所有的＜task> 元素，一次一个。大概来说，我们创建一个新的数据格，放进一个用逗号分隔的任务列表，然后关闭数据表格以及当前行。尤其，这些＜task> 元素节点数据（任务本身，比如，“喂食”）放置入变量“insertData”里的数据格。

接下来，我们检验当前＜pet> 是否有其它更多的task。如果还有，我们增加一个逗号（，）到变量insertData来让每一个任务使用一个逗号分隔（“a, b, c”，而不是“a, b, c,”－注意，最后一个逗号在第二个任务那里，所以我们不需要）。这个工作在我们取得subAry数组长度的时候（给循环的“j”变量加1）就完成了。因为这个循环会在下一个循环的时候把变量“j”递增1,“j”会比它这次检验时还多1。因此，如果“j+1”（或者，“当循环再次开始的时候j的值”）等于subAryLen（当前＜pet> 节点的＜task> 节点数目），这个循环将停止。如果循环不再运行，我们就不再添加新的逗号来分隔任务。所以如果“j+1”不等于subAryLen，我们直到我们可以安全的加入逗号到“insertData”，为下一个＜task> 作准备。

一旦内循环结束，我们关闭task数据格以及pet行。外部循环会重新开始创建一个新行以及移动到下一个＜pet> 。这个处理一直进行到所有的＜pet> 元素（以及每一个pet的所有＜task> 元素）都被处理完。

有其他方法吗？