我得指出两点：
首先，你会注意到我们并没有使用节点＜pets> 。这事因为我们只有一个数据组（＜pets> ）以及后来所有的元素（每一个＜pet> 元素）；这些子节点包含了不同的数据但它们有相同的名字。在这个例子中，这个节点能够被忽略。然而，将所有的元素＜pet> 放进＜pets> 元素还是比较好，而不是让这些＜pet> 元素自己散放（但仍然在data元素里面）。
另外一种方式是给每一个宠物放一个指定的标签，比如：
以下是引用片段：
＜?xml version="1.0" encoding="UTF-8"?>
＜data>
＜pets>
＜猫 />
＜狗 />
＜鱼 />
＜/pets>
＜/data> | 然后我们能够遍历元素＜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;
} | （Sheneyan注：修改后的示例见：附件： example_2_2.htm ，XML文件见：附件： data_2_3.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;
} |
新增加的内容，首先是两个新变量的声明：“subAry”和“subAryLen”。它们和之前的变量“dataArray”和“dataArrayLen”类似，除了它们指向不同的数组（特别是它们将指向那些“task”元素－当“dataArray”和“dataArrayLen”指向“pet”元素的时候）。
上一页 [1] [2] [3] [4] [5] [6] 下一页
GOOGLE广告载入中...
GOOGLE广告载入中... |
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！） 
