[js]remove whitespace for firefox

IE和FF的whitespace处理是不一样的，IE会忽略dom中的whitespace，而ff不会，所以以下代码在IE和FF下执行效果是不一样的：

 1 < div  id ="container" >
 2      < div  id ="main" >
 3          < div  id ="sub1" >
 4             hello sub 1.
 5          </ div >
 6          < div  id ="sub2" >
 7             hello sub 2.
 8          </ div >
 9      </ div >
10 </ div >
11 < script  type ="text/javascript" >
12    function test(){
13        alert( $('container').firstChild.firstChild.nextSibling.id );
14    }
15    test();
16 </ script >

为了使两个浏览器运行效果一样，要把所有dom中的whitespace节点去掉，可以这样写：

 

 1 /**/ /*
 2*
 3*remove whitespace for the dom, so that document.documentElement.firstChild.nextSibling.firstChild can work. 
 4*
 5*/
 6 _rdc.cleanWhitespace  =   function ( element )  {
 7    // If no element is provided, do the whole HTML document
 8    element = element || document;
 9    
10    for (var i = 0; i < element.childNodes.length; i++) {
11        var node = element.childNodes[i];
12        if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
13            element.removeChild(node);
14    }
15    
16    for (var i = 0; i < element.childNodes.length; i++)
17        _rdc.cleanWhitespace( element.childNodes[i] );
18}

 

 然后，在dom trace之前调用一下，递归地把document下面所有whitespace去掉：

 1 < div  id ="container" >
 2      < div  id ="main" >
 3          < div  id ="sub1" >
 4             hello sub 1.
 5          </ div >
 6          < div  id ="sub2" >
 7             hello sub 2.
 8          </ div >
 9      </ div >
10 </ div >
11 < script  type ="text/javascript" >
12    function test(){
13        _rdc.cleanWhitespace();
14        alert( $('container').firstChild.firstChild.nextSibling.id );
15    }
16    test();
17 </ script >

 

 

 两个浏览器执行的效果就一样了。

 

 更新：

此方法可能效率会低一点，因为要遍历所有dom节点。所以建议写类似几个方法：

 

 1 /**/ /*
 2    *
 3    * get the previous element ignore whitespace
 4    *
 5    */
 6     _rdc.prev  =   function ( elem )  {
 7        do {
 8            elem = elem.previousSibling;
 9        } while ( elem && elem.nodeType != 1 );
10        
11        return elem;
12    }
13
14      /**/ /*
15    *
16    * get the next element ignore whitespace
17    *
18    */
19     _rdc.next  =   function ( elem )  {
20        do {
21            elem = elem.nextSibling;
22        } while ( elem && elem.nodeType != 1 );
23        
24        return elem;
25    }
26
27      /**/ /*
28    *
29    * get the first child element ignore whitespace
30    *
31    */     
32     _rdc.first  =   function ( elem )  {
33        elem = elem.firstChild;
34        return elem && elem.nodeType != 1 ? _rdc.next ( elem ) : elem;
35    }
36     
37      /**/ /*
38    *
39    * get the last child element ignore whitespace
40    *
41    */     
42     _rdc.last  =   function ( elem )  {
43        elem = elem.lastChild;
44        return elem && elem.nodeType != 1 ? _rdc.prev ( elem ) : elem;
45    }
46
47      /**/ /*
48    *
49    * get the parent element ignore whitespace
50    *
51    */     
52     _rdc.parent  =   function ( elem, num )  {
53        num = num || 1;
54        for ( var i = 0; i < num; i++ )
55            if ( elem != null ) 
56                elem = elem.parentNode;
57        return elem;
58    }

 

 使用方法：

1 alert( _rdc.next( _rdc.first( _rdc.first(  $( ' container ' ) ) ) ).id );

 

转载于:https://www.cnblogs.com/jinweijie/archive/2008/12/15/1355480.html