Dom操作之兼容技巧分享

更新時間：2011年09月20日 23:37:27 作者：

在使用Dom操作HTML和XML時．我們時常會遇到空格問題．或許你還沒有遇到過．

例如：我們在獲取ul下所有l(wèi)i元素的時候．或者是某個元素的下一個元素時．都有可能會碰到這討厭的空格問題．當然在IE瀏覽器里這些空格會被自動過濾．而FF則沒有那么勤勞．FF瀏覽器會把這些空格也看作為一個元素．如果你對Dom中的空格元素感到疑惑，請運行下面的代碼．至少使用IE和FF兩種瀏覽器測試．你會明白一切！

復制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>運行該代碼以后．你會發(fā)現(xiàn)在IE里彈出3．在FF里彈出7．</h2> 
<ol id="list"> 
<li>html</li> 
<li>css</li> 
<li>dom</li> 
</ol> 
<script> 
var list = document.getElementById("list"); 
var list_child = list.childNodes; //獲取ol中所有的子元素 
alert("ol中共有"+list_child.length+"個元素,分別是"); 
for(var i = 0; i<list_child.length; i++){ 
alert(list_child[i].tagName); 
} 
</script> 
</body> 
</html> 

上面的代碼演示了要獲取ol元素中所有的子元素．并彈出ol內(nèi)有幾個子元素．我們可以看到ol中包含了3個li元素．在IE中彈出3這是正確的．那為什么到了FF和Chrome瀏覽器中會彈出7呢？其實在你書寫代碼的時候．在元素與元素換行之間都會形成一個空格．（注意：不要以為回一次車就會形成一個空格．這是錯誤的，也就是說元素與元素之間的空白，你就是換幾百次行．也算一個空格）FF和Chrome瀏覽器不會過濾這些空格元素．所以彈出7也是正確的．
下面我們用同樣的html結(jié)構(gòu)．來演示如何過濾刪除這些空格元素.

復制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>運行該代碼以后．你會發(fā)現(xiàn)在IE,FF,Chrome里返回的結(jié)果一樣了．</h2> 
<ol id="list"> 
<li>html</li> 
<li>css</li> 
<li>dom</li> 
</ol> 
<script> 
function Del_space(elem){ //過濾空格的函數(shù) 
var elem_child = elem.childNodes; //獲取所有子元素 
for(var i = 0;i<elem_child.length;i++){ 
//如果是文本節(jié)點，并且內(nèi)容只包含空格則刪除該節(jié)點 
if(elem_child[i].nodeName == "#text" && ! /\S/.test(elem_child[i].nodeValue)){ 
elem.removeChild(elem_child[i]);//如果該元素為空格則刪除 
} 
} 
} 
Del_space(document.getElementById("list")); //刪除ol中的所有空格 
var list = document.getElementById("list"); 
var list_child = list.childNodes; //獲取ol中所有的子元素 
for(var i=0;i<list_child.length;i++){ 
alert(list_child[i].tagName); 
} 
</script> 
</body> 
</html> 

推薦如下方法：

復制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>運行該代碼以后．你會發(fā)現(xiàn)在IE,FF,Chrome里返回的結(jié)果一樣了．</h2> 
<ol id="list"> 
<li>html</li> 
<li>css</li> 
<li>dom</li> 
</ol> 
<script> 
for(var x=0,list_li = document.getElementById('list').childNodes; x<list_li.length; x++){ 
if(list_li[x].nodeType == 1){ 
alert(list_li[x].tagName); 
} 
} 
</script> 
</body> 
</html> 