[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>
</div>
<script type="text/javascript">
    function test(){
        alert( $('container').firstChild.firstChild.nextSibling.id );
    }
    test();
</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    
    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去掉：

 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>
</div>
<script type="text/javascript">
    function test(){
        _rdc.cleanWhitespace();
        alert( $('container').firstChild.firstChild.nextSibling.id );
    }
    test();
</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 );
        
        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 );