然后我们能够遍历元素<pets>里的节点。这个processXML函数看起来就像这样:
function processXML(obj){
var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
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++){
if(dataArray[i].tagName){
insertData += '<tr><td>' + dataArray[i].tagName + '</td></tr>';
}
}
insertData += '</table>';
document.getElementById ('dataArea').innerHTML = insertData;
}
这里所作的修改就是我们指向了<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 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;
}