捕捉childNodes在不一样浏览器中的差别

 [转自] [url]http://blog.csdn.net/brothercat/archive/2006/08/23/1109869.aspx[/url]

 

       这几天开始尝试用AJAX作点小程序，在用responseXML从XML文件里取值时发如今IE与MF(Mozilla Firefox)中childNodes的表现有很大的不一样。具体表现以下：

首先，我写个了个XML文件（member.xml）：

<?xml version="1.0" encoding="UTF-8"?>
<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()函数来完成取节点操做，以下：

function  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出六个节点的类型。代码以下：

function  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[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()函数，以下：

function  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.二、7.八、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()函数，代码以下：

 

function  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有了一点更深的理解呢？这仅仅是心晴的一点当心得，一点小体会而已，写得很差还望你们多多指正，多多包涵！