<< window自动拨号脚本（适合多数pppoe链接或拨号连接） | Home | vmware增加磁盘空间方法以及出错解决 >>

在firefox下忽略whitespace节点遍历dom

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 );  

Tags:

posted @ Monday, December 15, 2008 12:00 AM

Print

Comments on this entry:

No comments posted yet.

Your comment:



 (will not be displayed)


 
 
 
Please add 3 and 7 and type the answer here:
 

Live Comment Preview:

 

JIN Weijie Contact

About
Syndication:

RSS ATOM

View posts by date
«March»
SunMonTueWedThuFriSat
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910