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

推荐订阅源

S
Schneier on Security
博客园_首页
量子位
博客园 - 司徒正美
S
SegmentFault 最新的问题
J
Java Code Geeks
小众软件
小众软件
博客园 - 【当耐特】
The Register - Security
The Register - Security
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Microsoft Azure Blog
Microsoft Azure Blog
G
Google Developers Blog
Blog — PlanetScale
Blog — PlanetScale
T
Tailwind CSS Blog
博客园 - Franky
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
G
GRAHAM CLULEY
Cyberwarzone
Cyberwarzone
腾讯CDC
Apple Machine Learning Research
Apple Machine Learning Research
V
Visual Studio Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
The Hacker News
The Hacker News
aimingoo的专栏
aimingoo的专栏
V
Vulnerabilities – Threatpost
P
Palo Alto Networks Blog
Scott Helme
Scott Helme
L
LINUX DO - 热门话题
F
Full Disclosure
D
DataBreaches.Net
Martin Fowler
Martin Fowler
Cisco Talos Blog
Cisco Talos Blog
L
LINUX DO - 最新话题
云风的 BLOG
云风的 BLOG
C
Check Point Blog
T
Threatpost
Google DeepMind News
Google DeepMind News
WordPress大学
WordPress大学
W
WeLiveSecurity
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
有赞技术团队
有赞技术团队
Hugging Face - Blog
Hugging Face - Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
L
Lohrmann on Cybersecurity
Last Week in AI
Last Week in AI
T
Tor Project blog
T
Troy Hunt's Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
S
Security Affairs
SecWiki News
SecWiki News

博客园 - 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 );