这里所作的修改就是我们指向了<pets>组元素（这个“[0]”意味这是第一个，即使它就是唯一的那一个）以及它的子节点（元素<猫 />，<狗 />，<鱼 />）。因为文本元素分割了这几个元素（空格被认为是一个节点），我们需要确定只有那些有标签名的节点（嗯，也就是只有标签）通过。然后我们输出每一个标签的名字。因为每一个标签名是一个宠物，我们不需要取得每一个节点的数据－节点名本身已经足够。去看一下它是怎么工作的吧。

还有另外一种方式来完成我们上面的工作，就是给每一个<pet>节点设置一个属性值。你的XML文档看起来就像这样：

<?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><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.html  ，XML文件见：data_2_2.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;
}