JavaScript中DOM详解


Posted in Javascript onApril 13, 2015

为了达到平稳退化,向后兼容,标记分离的思想,每次写js代码时做的第一件事应该是必要的测试和检查工作:
在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;
};

通用封装函数:

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封装方法如下:

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):

function getStyle(obj,name) {
   if(obj.currentStyle) {
     return obj.currentStyle[name];
   }
   else
   {
     return getComputedStyle(obj,null)[name];
   }
}

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

Javascript 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
js实现简单音乐播放器
Jun 30 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 #Javascript
javascript中scrollTop详解
Apr 13 #Javascript
jQuery实现的在线答题功能
Apr 12 #Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 #Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 #Javascript
jQuery插件pagination实现分页特效
Apr 12 #Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 #Javascript
You might like
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
jQuery使用元素属性attr赋值详解
2015/02/27 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python闭包实现计数器的方法
2015/05/05 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
python reverse反转部分数组的实例
2018/12/13 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
文员个人求职自荐信
2013/09/21 职场文书
本科生求职简历的自我评价
2013/10/21 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
教师党员思想汇报
2014/01/06 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
学生会招新宣传语
2015/07/13 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Java实现房屋出租系统详解
2021/10/05 Java/Android