关键的不同在于我们通过dataArray[i].getAttribute('type')取得值，它返回了当前<pet>节点的type属性的值。
继续...
现在我们已经知道了一些从一个单独的XML数据组中取回数据的有效方法，让我们看看如何从多个组中取回数据。和只是列出一个pets所拥有的内容不同，我们假设我们有一个针对我们宠物的日课表。因为它们都有不同的需要，每一只宠物都得仔细的照顾。面对这种情况，动物的看管员需要一个每日依据。现在来让我们将这些放入一个良好格式的XML：
<?
xml version="1.0" encoding="UTF-8"?>
<data>
<pets>
<pet>猫
<task>喂食</task>
<task>饮水</task>
<task>抓跳蚤</task>
</pet>
<pet>狗
<task>喂食</task>
<task>饮水</task>
<task>带出去遛遛</task>
</pet>
<pet>鱼
<task>喂食</task>
<task>检查氧气，水的纯度，其它</task>
</pet>
</pets>
</data>
也许这个看起来很奇怪，但这就是我们正在创建的子组(sub-group)。每一个<pet>元素都是一个组<pets>的子组，而每一个<task>则是每一个<pet>组的子元素。
在我继续之前，你也许希望将你的表格用一些css美化一下，比如：
table, tr, th, td {
border: solid 1px #000;
border-collapse: collapse;
padding: 5px;
}
这让这个表格更容易读取。现在让我们去研究函数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;
}
