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 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
简单实现js倒计时功能
Feb 13 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
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
codeigniter中测试通过的分页类示例
2014/04/17 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
个人简历自我评价
2014/01/06 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
《白鹅》教学反思
2014/04/13 职场文书
企业负责人任命书
2014/06/05 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
MySQL批量更新不同表中的数据
2022/05/11 MySQL
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers