这几天开始尝试用AJAX做点小程序,在用responseXML从XML文件里取值时发现在IE与MF(Mozilla Firefox)中childNodes的表现有很大的不同。具体表现如下:
首先,我写个了个XML文件(member.xml):
< St_Member >
< MemId > 10002 </ MemId >
< MemNickName > Siuery </ MemNickName >
< St_Mem_Ishow >
< Photo > 8.2 </ Photo >
< Design > 7.8 </ Design >
< Text > 6.7 </ Text >
< Visage > 6.6 </ Visage >
< Stature > 6.2 </ Stature >
< Grace > 6.1 </ Grace >
</ St_Mem_Ishow >
</ St_Member >
现在要取节点St_Mem_Ishow下六个子节点(Photo、Design、Text、Visage、Stature、Grace)里的数据,我写了个getScore()函数来完成取节点操作,如下:
... {
var voteItemStr="Photo|Design|Text|Visage|Stature|Grace";
var voteItem=voteItemStr.split("|");
if (http_request.readyState == READY_STATE_COMPLETE)
...{
if (http_request.status == 200)
...{
var xmlDoc=http_request.responseXML;
var getIshow=xmlDoc.getElementsByTagName("St_Mem_Ishow");
if(getIshow)
...{
for(var i=0;i<6;i++)
...{
$(voteItem[i]).innerHTML=getIshow[0].childNodes[i].firstChild.data;
}
}
}
else
...{
if($("f1"))...{$("f1").innerHTML="fail to call back!";}
}
}
else
...{
for(i=0;i<6;i++)
...{
$(voteItem[i]).innerHTML="...";
}
}
}
正如所料,IE里取值表现良好,如图:
但在MF里却另一番景象:
再打开MF里的JavaScript控制台一看,有一个错误如下:
getIshow[0].childNodes[i].firstChild没有属性,意思也就是firstChild根本没找到!这是怎么回事呢?后来上网查查资料,一篇标题为《Mozilla Firefox与IE浏览器的javascript兼容性问题》的文章提示了我,文章里这样提到:
childNodes的下标的含义在IE和MF中不同,MF使用DOM规范,childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。
在IE里,当取节点的值时,我一般习惯性地认为:当我们用getElementsByTagName(“markNode”)定位到markNode节点(如下XML模型)时,它的第一个子节点childNode1可以用getElementsByTagName(“markNode”).childNodes[0]来定位找到,而childNode1中的数据data1,我们则可以用getElementsByTagName(“markNode”).childNodes[0].firstChild.data来定位取到。
<markNode>
<childNode1>data1</childNode1>
<childNode2>data2</childNode2>
</markNode>
(肯定有兄弟会问:为什么不是用getElementsByTagName(“markNode”).childNodes[0].data来取值呢?道理很简单,我们得把data1也当作childNode1下第一个子节点里得数据,而且肯定只有这样理解,我们才能取到data1的数据,否则照getElementsByTagName(“markNode”).childNodes[0].data取值,IE会显示“undefined”,也就意味着data在childNodes[0]根本未定义。)
在MF中getElementsByTagName(“markNode”).childNodes[0].firstChild.data未定位到“data1”,这究竟是什么缘故呢,仔细回味《Mozilla Firefox与IE浏览器的javascript兼容性问题》中那句话:“childNodes中会插入空白文本节点”,我打算尝试确定一下空白文本节点到底指的是什么,在什么地方出现。还是拿member.xml来试试,我把getScore()函数改了下,使它能alert出六个节点的类型。代码如下:
... {
…
if (http_request.readyState == READY_STATE_COMPLETE)
...{
if (http_request.status == 200)
...{
…
if(getIshow)
...{
for(var i=0;i<6;i++)
...{
alert(getIshow[0].childNodes[i]);
}
}
}
else
...{
…
}
}
else
...{
…
}
}
IE里没有问题,六个object正好代表了Photo、Design、Text、Visage、Stature、Grace六个节点的类型是object型:
MF里却先后间隔出现了object text和object element两种类型,这也就表示childNodes[0]、childNodes[2]和childNodes[4]这三个节点都是object text类型的节点,而childNodes[1]、childNodes[3]、childNodes[5]都是object element类型的节点,问题似乎一点点明晰起来:因为Photo、Design、Text、Visage、Stature、Grace这六个节点肯定是同类型的节点,而通过alert得到的类型却是两种不同类型,这也就很清楚地表明object text类型或者object element类型中有一种就是《Mozilla Firefox与IE浏览器的javascript兼容性问题》里提到的“空白文本节点”!(虽然心里已经猜到object text就是空白文本节点的类型,但还是抱着谨慎的态度继续验证一下)
下面的测试变得异常简单,我再次修改了getScore()函数,如下:
... {
…
if (http_request.readyState == READY_STATE_COMPLETE)
...{
if (http_request.status == 200)
...{
…
if(getIshow)
...{
for(var i=0;i<6;i++)
...{
//alert(getIshow[0].childNodes[0].firstChild.data);
alert(getIshow[0].childNodes[1].firstChild.data);
}
}
}
else
...{
…
}
}
else
...{
…
}
}
在MF中,依次逐个alert出getIshow[0].childNodes[i].firstChild.data(i=0,1,2,3,4,5),结果当i=1,3,5时分别显示8.2、7.8、6.7,恰好是Photo、Design、Text节点的数值;而当i=0,2,4时,MF无法显示。这也就验证了Photo、Design、Text节点是object element类型的,同时也说明了:在MF里, <Photo></Photo>这样的object element类型节点前都会插入一个空白文本节点,而这个空白文本节点的类型是object text类型的!所得假设模型如下:
<[object Text] />
<[object Element]>Data</[object Element]>
<[object Text] />
<[object Element]>Data</[object Element]>
<[object Text] />
<[object Element]>Data</[object Element]>
到目前为止,关于IE和MF中捕捉childNodes差异的测试就结束了,如何在MF中也能正常获取XML节点的数值呢,我想这对兄弟们应该就不是什么问题了吧,反正我是这样做的,还是getScore()函数,代码如下:
... {
…
if (http_request.readyState == READY_STATE_COMPLETE)
...{
if (http_request.status == 200)
...{
…
if(getIshow)
...{
if(agentType=="IE")
//agentType=( window.navigator.userAgent.indexOf('MSIE')<1)?'MF':'IE'
...{
for(var i=0;i<6;i++)
...{
$(voteItem[i]).innerHTML=getIshow[0].childNodes[i].firstChild.data;
}
}
else //FF capability...
...{
for(var i=0;i<6;i++)
...{
j=(i+1)*2-1;
$(voteItem[i]).innerHTML=getIshow[0].childNodes[j].firstChild.data;
}
}
}
}
else
...{
…
}
}
else
...{
…
}
}
好了,文章写到这会也就差不多了,不知道大家是否和我一样对DOM有了一点更深的理解呢?这仅仅是心晴的一点小心得,一点小体会而已,写得不好还望大家多多指正,多多包涵!