IE和FF的whitespace节点处理是不一样的,IE会忽略dom中的whitespace,而ff不会,所以以下代码在IE和FF下执行效果是不一样的:
<div id="container"> <div id="main"> <div id="sub1"> hello sub 1. </div> <div id="sub2"> hello sub 2. </div> </div> </div> <script type="text/javascript"> function test(){ alert( $('container').firstChild.firstChild.nextSibling.id ); } test(); </script>
为了使两个浏览器运行效果一致,则需要把所有dom中的whitespace节点去掉,可以这样写:
/* * *remove whitespace for the dom, so that document.documentElement.firstChild.nextSibling.firstChild can work. * */ _rdc.cleanWhitespace = function( element ) { // If no element is provided, do the whole HTML document element = element || document; for (var i = 0; i < element.childNodes.length; i++) { var node = element.childNodes[i]; if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) element.removeChild(node); } for (var i = 0; i < element.childNodes.length; i++) _rdc.cleanWhitespace( element.childNodes[i] ); }
然后,在dom trace之前调用一下,递归地把document下面所有whitespace去掉:
<div id="container"> <div id="main"> <div id="sub1"> hello sub 1. </div> <div id="sub2"> hello sub 2. </div> </div> </div> <script type="text/javascript"> function test(){ _rdc.cleanWhitespace(); alert( $('container').firstChild.firstChild.nextSibling.id ); } test(); </script>
两个浏览器执行的效果就一样了。
更新:
此方法可能效率会低一点,因为要遍历所有dom节点。所以建议写类似几个方法:
/* * * get the previous element ignore whitespace * */ _rdc.prev = function( elem ) { do { elem = elem.previousSibling; } while ( elem && elem.nodeType != 1 ); return elem; } /**//* * * get the next element ignore whitespace * */ _rdc.next = function( elem ) { do { elem = elem.nextSibling; } while ( elem && elem.nodeType != 1 ); return elem; } /**//* * * get the first child element ignore whitespace * */ _rdc.first = function( elem ) { elem = elem.firstChild; return elem && elem.nodeType != 1 ? _rdc.next ( elem ) : elem; } /**//* * * get the last child element ignore whitespace * */ _rdc.last = function( elem ) { elem = elem.lastChild; return elem && elem.nodeType != 1 ? _rdc.prev ( elem ) : elem; } /**//* * * get the parent element ignore whitespace * */ _rdc.parent = function( elem, num ) { num = num || 1; for ( var i = 0; i < num; i++ ) if ( elem != null ) elem = elem.parentNode; return elem; }
使用方法:
alert( _rdc.next( _rdc.first( _rdc.first( $('container') ) ) ).id );