javascript开发中因空格引发的错误


Posted in Javascript onNovember 08, 2010

废话不多说,先上代码给大家看看

<!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的解析实在令人费解。
再此做记录,希望各位朋友看了有用,别因为跟我一样的问题半天没找到解决问题的方法。
Javascript 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
JS对象与JSON格式数据相互转换
Feb 20 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
AJAX检测用户名是否存在的方法
Mar 24 Javascript
详解 TypeScript 枚举类型
Nov 02 Javascript
window.ActiveXObject使用说明
Nov 08 #Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 #Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 #Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 #Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 #Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 #Javascript
基于jQuery的仿flash的广告轮播
Nov 05 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
php bootstrap实现简单登录
2016/03/08 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP7 list() 函数修改
2021/03/09 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
slice函数的用法 之不错的应用
2006/12/29 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
让python json encode datetime类型
2010/12/28 Python
基于python指定包的安装路径方法
2018/10/27 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
师德师风事迹材料
2014/12/20 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
MySQL分布式恢复进阶
2022/07/23 MySQL