firefox与IE的nextSibling

今天遇到了一个JS的问题，后来上网查了一下，原来是对html的DOM操作时候，nextsibling引起的问题，mark一下

 

网上firefox和ie的javascript兼容性也讲的比较多了
可以在百度上搜索"firefox javascript 兼容性"
比较简单的东西百度上能找到中文的就用baidu好了.
主要一般都是document.all这样的应用,一般改为getElementById
还有就是一个页面有多个表单的时候需要注意一些问题.

下面还有一些需要补充的
就是firstChild,nextsbiling这两个.
下面给出函数吧.还是代码比较说明问题
代码都是网上来的.
不过要注意的是,getNext和getFirstChild是不一样的
next是下一个,同级别的下一个,不会取到自己这个节点的子节点.

可能是因为对dom的理解不一样ie和firefox对firstChild,nextSbiling的处理不太一样.
所以要取到下一个结点,只能用type来判断了.


function getNextSibling(startBrother){
  endBrother=startBrother.nextSibling;
  while(endBrother.nodeType!=1){
    endBrother = endBrother.nextSibling;
  }
  return endBrother;
}

function getNextSibling1(obj){
if(obj.nextSibling.nodeType==3) {
sibling=obj.nextSibling.nextSibling; // Moz. Opera
}
else {
sibling=obj.nextSibling; // IE
}
return sibling;
}
function getFirstChild(obj){
for (i=0; i<obj.childNodes.length; i++){
if (obj.childNodes[i].nodeType==1)
    return obj.childNodes[i];
else
    continue;
}

需要使用的时候先getElementByid获取到首结点,然后就可以取到后面的结点了.


另外就是ie不区分变量大小写,收到html首先就格式化了,所以要注意id可能会相同.
会导致一些问题.

另外就是ie会把NULL字符转换成space空格,firefox是不会处理的,但是
如果javascript里面处理NULL会有一些问题.opera基本能够兼容IE的一些
函数,比如documnet.all等等.基本都能用吧,不过空字符还是不行的.是变量中的空字符
会带来问题.

评论

1 楼 ricoyu 2011-03-02  

代码比较乱， 指出几点问题：
1， endBrother=startBrother.nextSibling;
声明变量请使用var关键字， 不加var变量作用域是全局的， 即作为window对象的一个属性创建， endBrother将在函数外仍可见。改进一下：

function getNextSibling(startBrother){
  var endBrother=startBrother.nextSibling;
  while(endBrother.nodeType!=1){
    endBrother = endBrother.nextSibling;
  }
  return endBrother;
}

2，

getFirstChild

最后少了一个右括号｝
3， 这个函数，请看我的注释

function getNextSibling1(obj){
  //这边只是判断node是不是一个text node而已， 如果是，
  //不管是IE还是ff，Opera都会进到这段代码里面， 为何你认为只有
  // Moz. Opera会执行这段代码？
  if(obj.nextSibling.nodeType==3) {
    //alert('ie too');
    sibling=obj.nextSibling.nextSibling; // Moz. Opera
  }
  // 这边的分支表示如果node不是text node， 那么皆大欢喜， 不管
  // 是IE还是其他浏览器， 都会执行这段代码， 怎么变成IE专享的了呢？
  else {
    //alert('Firefox too');
    sibling=obj.nextSibling; // IE
  }
  return sibling;
}

其实nextSibling在FF/ie间差别的实质原因是：
当两个nodeType都为1的element间存在换行， 那么换行符被FF认为是一个空格， 因此element1.nextSibling为text node， 即这个空格。 请看下面两组链接的差别：
第一组有换行， 所以在FF中link2的nextSibling是一个textNode元素，它的nodeType为3
<a href="link2" id="link2"></a>
<a href="link3" id="link3"></a>
第二组没有换行， 因此在FF中link2.nextSibling就是link3了，它的nodeType为1
<a href="link2" id="link2"></a><a href="link3" id="link3"></a>
我想这才是你这篇博文想要说的

引用

ie和firefox对firstChild,nextSbiling的处理不太一样

的实质原因。