我们也改变了变量“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>元素）都被处理完。
有其他方法吗？
你也许会想：“那javascript变得相当复杂了，但它只会随着XML越来越复杂而跟着变复杂，也许我们能够简化XML，然后，简化javascript”。如果你这么想，很棒，因为你完全正确。我之前展示的不同方法之一，我详细说明的那个也许能够成为最合适的。我们怎么使用属性来对应每一只宠物以及相应任务？XML看起来会变成怎样？
＜?xml version="1.0" encoding="UTF-8"?>
＜data>
＜pets>
＜pet type="Cat" tasks="Feed, Water, Comb out fleas" />
＜pet type="Dog" tasks="Feed, Water, Put outside" />
＜pet type="Fish" tasks="Feed, Check oxygen, water purity, etc." />
＜/pets>
＜/data>哇哦！看起来简单多了。让我们看看我们的processXML函数如何修改：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pet');
var dataArrayLen = dataArray.length;
var insertData = '＜table>＜tr>＜th>'
+ 'Pets＜/th>＜th>Tasks＜/th>＜/tr>';
for (var i=0; i＜dataArrayLen; i++){
insertData += '＜tr>＜td>' + dataArray[i].getAttribute('type') + '＜/td>'
+ '＜td>' + dataArray[i].getAttribute('tasks') + '＜/td>＜/tr>';
}
insertData += '＜/table>';
document.getElementById ('dataArea').innerHTML = insertData;
} （Sheneyan注：修改后的示例见：附件： example_2_4.htm ，XML文件见：附件： data_2_4.xml ）
就像你猜的一样，函数简单多了。因为代码变得简单，它也会变得更有效率。和我们比较老的函数的唯一的不同在于这个变量insertData现在插入更多的HTML，尤其是两个新变量“type”和“tasks”。就如我们较早之前所学的，那些属性是我们从XML文档的＜pet>元素中取得的，而且每个pet的属性都有不同的值。对于你自己修改这个XML文件以适应你的进度的变动来说也许是最简单的方法。例如，如果你最终把你的猫身上的跳蚤抓光了，你只要简单从你的猫的每日任务表中把“减少跳蚤数量”删除，然而在之前我们使用的XML中，实现起来也许会觉得糊里糊涂。
最后的XML格式化的方法是将两部分混合。现在，我们将使用属性和不同的标签。让我们看一下示例XML：
＜?xml version="1.0" encoding="UTF-8"?>
＜data>
＜pets>
＜猫 tasks="喂食, 饮水, 减少跳蚤数量" />
＜狗 tasks="喂食, 饮水, 带出去遛遛" />
＜鱼 tasks="喂食, 检查氧气，水的纯度，其它" />
＜/pets>
＜/data>这也许是最便于理解的XML。让我们分析一下我们为了让processXML函数运作起来所作的变更：
function processXML(obj){
var dataArray = obj.getElementsByTagName('pets')[0].childNodes;
var dataArrayLen = dataArray.length;
var insertData = '＜table>＜tr>＜th>'
+ 'Pets＜/th>＜th>Tasks＜/th>＜/tr>';
for (var i=0; i＜dataArrayLen; i++){
if(dataArray[i].tagName){
insertData += '＜tr>＜td>' + dataArray[i].tagName + '＜/td>'
+ '＜td>' + dataArray[i].getAttribute('tasks') + '＜/td>＜/tr>';
}
}
insertData += '＜/table>';
document.getElementById ('dataArea').innerHTML = insertData;
} （Sheneyan注：修改后的示例见：附件： example_2_5.htm ，XML文件见：附件： data_2_5.xml ）
“dataArray”现在指向了＜pets>的子节点，将它们作为一个数组对待（换句话说，dataArray现在是在＜pets>节点内所有节点的数组）。这事因为每一个标签都不同（＜猫 />，＜狗 />，＜鱼 />），所以我们不能使用这些元素的名称来搜索它们（而之前我们可以使用＜pet>，因为所有的元素都是＜pet>）。
还是一样，每个节点之间的有空格，所以在我们的处理过程中得排除掉文本节点。我们能够检验标签名是否存在－文本节点是节点但没有标签，而＜猫 />，＜狗 />，＜鱼 />节点都是标签。所以如果一个标签有名字，那我们能够将数据插入变量insertData。我们插入的数据是一个表格并有两个表格数据格。这第一个单元格是标签名，也就是宠物的类型（猫，狗或鱼），而第二个单元格则是指定动物的“tasks”属性值（比如“喂食或饮水”）。
打印文档
推荐好友 
返回顶部
增大字体 
减少字体