快捷導(dǎo)航

javascript開發(fā)中因空格引發(fā)的錯誤

更新時間：2010年11月08日 17:13:54 作者：

最近寫一個關(guān)于用JavaScript做圖片自動切換問題發(fā)現(xiàn)一個非常奇特的問題，除了空格和換行外完全相同的代碼，在Firefox下卻有截然不同的運(yùn)行結(jié)果，今天記錄以提供他人留意及自我備查。

廢話不多說，先上代碼給大家看看

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>依依園地</title> 
</head> 
<body> 
<div id="win"> 
<ul id="picChange"> 
<li> 
<img src="images/01.jpg" title="圖片1"></li> 
<li> 
<img src="images/02.jpg" title="圖片2"></li> 
<li> 
<img src="images/03.jpg" title="圖片3"></li> 
</ul> 
</div> 
<script type="text/javascript"> 
var pic = document.getElementById('picChange'); 
var picList = pic.getElementsByTagName("li"); 
alert(picList[0].firstChild); 
</script> 
</body> 
</html> 

以上代碼1請分別在Firefox和IE中運(yùn)行，F(xiàn)irefox出現(xiàn)的是 [object Text] ，而IE中出現(xiàn)的是[object]，這里IE和Firefox都把picList[0].firstChild這個對象當(dāng)作object對象，F(xiàn)irefox提示是Text類型對象，IE沒有提示更細(xì)了。
我們再運(yùn)行下面這部分的代碼看看，看清楚了，代碼本身相同，但是li下面沒做換行縮進(jìn)。

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>依依園地</title> 
</head> 
<body> 
<div id="win"> 
<ul id="picChange"> 
<li><img src="images/bigpic/01.jpg" title="護(hù)腰/HY005"></li> 
<li><img src="images/bigpic/02.jpg" title="枕頭吊臂/DB-004"></li> 
<li><img src="images/bigpic/03.jpg" title="大護(hù)腳/HY-001"></li> 
</ul> 
</div> 
<script type="text/javascript"> 
var pic = document.getElementById('picChange'); 
var picList = pic.getElementsByTagName("li"); 
alert(picList[0].firstChild); 
</script> 
</body> 
</html> 

以上代碼2請分別在Firefox和IE中運(yùn)行，F(xiàn)irefox出現(xiàn)的是 [object HTMLImageElement] ，而IE中出現(xiàn)的是[object]，這里IE和Firefox都把picList[0].firstChild這個對象當(dāng)作object對象，F(xiàn)irefox提示是HTMLImageElement類型對象，IE沒有提示更細(xì)了。
上下兩種寫法只是縮進(jìn)和換行的差別，在IE中被認(rèn)做相同的object對象，可是不同的縮進(jìn)在Firefox中卻代表了不同的對象，F(xiàn)irefox對HTML的解析實(shí)在令人費(fèi)解。
再此做記錄，希望各位朋友看了有用，別因為跟我一樣的問題半天沒找到解決問題的方法。