惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

WordPress大学
WordPress大学
博客园 - 司徒正美
Last Week in AI
Last Week in AI
博客园 - 聂微东
Jina AI
Jina AI
月光博客
月光博客
爱范儿
爱范儿
美团技术团队
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Hugging Face - Blog
Hugging Face - Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 叶小钗
T
Tailwind CSS Blog
博客园 - 【当耐特】
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Apple Machine Learning Research
Apple Machine Learning Research
有赞技术团队
有赞技术团队
罗磊的独立博客
小众软件
小众软件
雷峰网
雷峰网
IT之家
IT之家
大猫的无限游戏
大猫的无限游戏
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
V
Visual Studio Blog

博客园 - JIN Weijie

基于Entity Framework的自定义分页,增删改的通用实现 基于Dapper的分页实现,支持筛选,排序,结果集总数,多表查询,非存储过程 让Windows 7变成WIFI热点 新浪微博RSS生成器Ver 1.0 同步Twitter帐号 修改Thickbox,预加载图片和点击图片前后浏览 ASTreeView 1.5.8发布(ASP.Net树控件) ASTreeView 1.5.3发布(ASP.NET树控件) ASTreeView 1.4.0发布(ASP.NET树控件) ASTreeView 1.3.0发布(ASP.NET树控件) ASTreeView 1.1.1发布(ASP.NET树控件) 在GoDaddy上部署SubText ASTreeView 1.0发布(一个ASP.NET树控件) 自定义增加Windows xp IIS的连接数 javascript closure(闭包)的一个示例 vmware增加磁盘空间方法以及出错解决 <=本博客已经转移至jinweijie.com=> [js][asp.net]客户端控制validator [asp.net]优化ViewState [windows]自动拨号脚本
[js]remove whitespace for firefox
JIN Weijie · 2008-12-15 · via 博客园 - JIN Weijie

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    }

 使用方法:

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