最近写一个关于用JavaScript做图片自动切换问题发现一个非常奇特的问题,除了空格和换行外完全相同的代码,在Firefox下却有截然不同的运行结果,今天记录以提供他人留意及自我备查。
废话不多说,先上代码给大家看看
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
<!-- {cps..0}-->
<!
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 >
< 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中运行,Firefox出现的是 [object Text] ,而IE中出现的是[object],这里IE和Firefox都把picList[ 0 ].firstChild 这个对象当作object对象,Firefox提示是Text类型对象,IE没有提示更细了。
我们再运行下面这部分的代码看看,看清楚了,代码本身相同,但是li下面没做换行缩进。
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
<!-- {cps..1}-->
<!
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 ="护腰/HY005" ></ li >
< li >< img src ="images/bigpic/02.jpg" title ="枕头吊臂/DB-004" ></ li >
< li >< img src ="images/bigpic/03.jpg" title ="大护脚/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 >
< 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 ="护腰/HY005" ></ li >
< li >< img src ="images/bigpic/02.jpg" title ="枕头吊臂/DB-004" ></ li >
< li >< img src ="images/bigpic/03.jpg" title ="大护脚/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中运行,Firefox出现的是 [object HTMLImageElement] ,而IE中出现的是[object],这里IE和Firefox都把picList[ 0 ].firstChild 这个对象当作object对象,Firefox提示是HTMLImageElement类型对象,IE没有提示更细了。
上下两种写法只是缩进和换行的差别,在IE中被认做相同的object对象,可是不同的缩进在Firefox中却代表了不同的对象,Firefox对HTML的解析实在令人费解。
再此做记录,希望各位朋友看了有用,别因为跟我一样的问题半天没找到解决问题的方法。