这里所作的修改就是我们指向了<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; } (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; } (Sheneyan注:修改后的示例见:example_2_3.html ,XML文件见:data_2_3.xml)
|