[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>
10
</div>
11
<script type="text/javascript">
12
function test(){
13
alert( $('container').firstChild.firstChild.nextSibling.id );
14
}
15
test();
16
</script>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
为了使两个浏览器运行效果一样,要把所有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
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
然后,在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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
两个浏览器执行的效果就一样了。
更新:
此方法可能效率会低一点,因为要遍历所有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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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
}
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
使用方法:
1
alert( _rdc.next( _rdc.first( _rdc.first( $('container') ) ) ).id );
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)