javascript开发中因空格引发的错误
人气: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>
以上代码1请分别在Firefox和IE中运行，Firefox出现的是 [object Text] ，而IE中出现的是[object]，这里IE和Firefox都把picList[0].firstChild这个对象当作object对象，Firefox提示是Text类型对象，IE没有提示更细了。
我们再运行下面这部分的代码看看，看清楚了，代码本身相同，但是li下面没做换行缩进。
<!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>
以上代码2请分别在Firefox和IE中运行，Firefox出现的是 [object HTMLImageElement] ，而IE中出现的是[object]，这里IE和Firefox都把picList[0].firstChild这个对象当作object对象，Firefox提示是HTMLImageElement类型对象，IE没有提示更细了。
上下两种写法只是缩进和换行的差别，在IE中被认做相同的object对象，可是不同的缩进在Firefox中却代表了不同的对象，Firefox对HTML的解析实在令人费解。
再此做记录，希望各位朋友看了有用，别因为跟我一样的问题半天没找到解决问题的方法。
复制代码 代码如下:
<!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中运行，Firefox出现的是 [object Text] ，而IE中出现的是[object]，这里IE和Firefox都把picList[0].firstChild这个对象当作object对象，Firefox提示是Text类型对象，IE没有提示更细了。
我们再运行下面这部分的代码看看，看清楚了，代码本身相同，但是li下面没做换行缩进。
复制代码 代码如下:
<!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>
以上代码2请分别在Firefox和IE中运行，Firefox出现的是 [object HTMLImageElement] ，而IE中出现的是[object]，这里IE和Firefox都把picList[0].firstChild这个对象当作object对象，Firefox提示是HTMLImageElement类型对象，IE没有提示更细了。
上下两种写法只是缩进和换行的差别，在IE中被认做相同的object对象，可是不同的缩进在Firefox中却代表了不同的对象，Firefox对HTML的解析实在令人费解。
再此做记录，希望各位朋友看了有用，别因为跟我一样的问题半天没找到解决问题的方法。
加载全部内容