快捷導(dǎo)航

Dom操作之兼容技巧分享

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

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

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

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>運(yùn)行該代碼以后．你會(huì)發(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+"個(gè)元素,分別是"); 
for(var i = 0; i<list_child.length; i++){ 
alert(list_child[i].tagName); 
} 
</script> 
</body> 
</html> 

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

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>運(yùn)行該代碼以后．你會(huì)發(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é)點(diǎn)，并且內(nèi)容只包含空格則刪除該節(jié)點(diǎn) 
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> 

推薦如下方法：

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Dom</title> 
</head> 
<body> 
<h2>運(yùn)行該代碼以后．你會(huì)發(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> 