注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

奕克

爱家人爱工作爱生活

 
 
 

日志

 
 

DOM浏览器不兼容与javascript调试利器  

2010-08-31 10:57:18|  分类: 技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
DOM文档对象模型在AJAX技术中是一个重要组成部分。但DOM是一个规范,不同浏览器厂商对它的实现有所不同,昨天备课时准备了一个小例子,调试过程中发现了一个典型差异。例子代码如下:
window.onload=function(){
var myDocument = document;
var htmlElement = myDocument.documentElement;
alert("The root element of the page is " + htmlElement.nodeName);
var headElement = htmlElement.getElementsByTagName("head")[0];
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
    var titleText = titleElement.firstChild;
    alert("The page title is '" + titleText.nodeValue + "'");
                                      }
}

加粗的那句代码的作用是获得title节点的第一个子节点,根据DOM规范也就是title标签的内容,文档的标题。
首先在Firefox浏览器中调试该代码。在Firefox中调试javascript采用Firebug,这是一个强大的firefox插件调试器,几乎可以一剑在手,夫复何求了。发现没有问题,网页弹出了页面的标题,单步监视如图:
DOM浏览器不兼容与javascript调试利器 - wucccsk - wucccsk的博客
可以看到titleText得到的是一个文本节点,节点内容“无标题文档”,该节点是title节点的第一个子节点。
但这样的代码在IE7中运行时却出现了错误,为了让IE能够调试javascript脚本,需要设置如下图:
DOM浏览器不兼容与javascript调试利器 - wucccsk - wucccsk的博客
即将“禁用脚本调试”复选框勾去掉。这样IE在JS脚本出错时就会显示如图的界面,选择是,程序将打开IE下的调试器调试脚本。
DOM浏览器不兼容与javascript调试利器 - wucccsk - wucccsk的博客
IE下调试器可以通常可以有2种选择,一种是visual studio,功能强大;还有一种是使用office2003自带的Microsoft script Editor,安装界面如图:
DOM浏览器不兼容与javascript调试利器 - wucccsk - wucccsk的博客
它也能支持单步调试和监视变量等功能。我的机子不知道什么问题,在IE中碰到错误选择打开调试器,确定后总无法打开调试器。google了1个小时也没找到原因,后来偶然发现,在HTML源文件编辑器中,使用调试菜单下的“WEB调试”,如图:
DOM浏览器不兼容与javascript调试利器 - wucccsk - wucccsk的博客
安装WEB调试后,再次运行出错脚本,选择调试后,程序即打开了如图的调试器选择框:
DOM浏览器不兼容与javascript调试利器 - wucccsk - wucccsk的博客
这里我选择使用vs2008进行调试,然后经过如下图的变量监视后,我发现:
DOM浏览器不兼容与javascript调试利器 - wucccsk - wucccsk的博客
titleelement的firstchild为空,也就是说,IE不认为标签内的文本是标签的子节点。因此对于IE来说,如果想得到title标签内文本,也就是文档标题,应该使用如下的语句:
window.onload=function(){
var myDocument = document;
var htmlElement = myDocument.documentElement;
alert("The root element of the page is " + htmlElement.nodeName);
var headElement = htmlElement.getElementsByTagName("head")[0];
var titleElement = headElement.getElementsByTagName("title")[0];
if (titleElement != null) {
   alert("The page title is '" + titleElement.innerHTML + "'");
 }
}
也就是使用innerHTML属性得到标签文本内容,而不是使用firstchild属性先去获得子节点。而且这样的代码在Firefox中也能得到文档标题,没有错误。所以经过上述调试,我们更应该使用第二段代码而不是第一段代码去获得文档标题。
 
上述例子表明,正如CSS的实现各浏览器不尽相同一样,DOM规范的实现也存在浏览器差异。这就是现代WEB开发人员的梦魇,我们不得不使用CSS hack技术去使自己的网页在各种浏览器中表现一致。使用各种javascipt调试器去调试自己的DOM操作,保证它们在主流浏览器中不出错。
当然我们不应该因噎废食,CSS完美的网页表现与内容的分离,AJAX的强大用户交互性,使得我们不得不继续因它们的优点而使用它们,不因他们的缺点而废弃他们。
这让我想到做人,即使你有很多缺点,但只要你有一个拿的出手的优点,你就能在竞争环境中存活,人最怕的是一无是处。
 
  评论这张
 
阅读(150)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017