微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JavaScript中DOM详解

为了达到平稳退化,向后兼容,标记分离的思想,每次写js代码时做的第一件事应该是必要的测试和检查工作: 在js文件里首先添加以下代码进行检查:

rush:js;"> window.onload = function(){ if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementsByClassName) return false; if(!document.getElementById("selector")) return false; if(!document.getElementsByTagName("tag")) return false; if(!document.getElementsByClassName("selector")) return false; };

通用封装函数

rush:js;"> var $ = function(id){ return document.getElementBy Id (id); } var addEvent = function(obj,event,fn){ //obj:元素对象名字,event:绑定事件,fn:触发的回调函数 if(obj.addEventListener){ obj.addEventListener(event,fn,false); } else if(obj.attachEvent){ obj.attachEvent("on"+event,fn); } }

对于很多函数需要页面加载即运行,window.onload封装方法如下:

rush:js;"> function addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload != "function") { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } addLoadEvent(firstFunction); addLoadEvent(secondFunction);

火狐和IE之间的JavaScript差异

1、在大多数情况下,为事件处理函数返回false,可以防止认的事件行为.例如,认情况下点击一个a元素,页面跳转到该元素href属性指定的页。 return false 就相当于终止符,return true 就相当于执行符。 在js中对于return用法的三种景象的总结如下: retrun true; 返回正确的处理惩罚成果。 return false;返回错误的处理惩罚成果;终止处理惩罚;阻拦提交表单;阻拦履行认的行动。 return;把把握权返回给页面

2、在绝大多数时候,把一个函数调用赋值给一个变量将是一个好主意。

3、noscript标签可被用于可识别 script标签但无法支持其中的脚本的浏览器。如果浏览器支持脚本,那么它不会显示出 noscript 标签中的文本。

4、在动态设置样式时,只要有可能,最好选用CSS,最简单的就是选择最容易实现的方法

5、在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些。

6、如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval,因为setTimeout每一次都会初始化一个定时器,而setInterval只会在开始的时候初始化一个定时器。

7、如果要连接多个字符串,应该少使用+=,条件分支时尽量使用三目运算符替代条件分支。

8、很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()。

9、在JavaScript中所有变量都可以使用单个var语句来声明,这样就是组合在一起的语句,以减少整个脚本的执行时间。

10、对于大的DOM更改,使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。

11、当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行。

12、如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高。

13、因为elemet.style只能获取内联样式,而element.currentStyle.width是IE浏览器专有属性,getComputedStyle(element,null).width是火狐和Chrome浏览器的特有属性,所以为了兼容,获取内外样式方法如下(不可取复合样式,如background,border,而是应该写成backgroundColor,borderWidth):

rush:js;"> function getStyle(obj,name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,null)[name]; } }

以上所述就是本文的全部内容了,希望大家能够喜欢。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐