一些常用且实用的原生JavaScript函数

光明使者

css及html方面的技巧总结,点此前往: 前端开发中一些常用技巧总结, 你还可以前往兰芝博客, 查看由淘宝UED整理的前端tips:
　　1. document.getElementById的简写
　　2. getElementsByTagName的简写方式
　　3. 原生JavaScript中获取元素索引的函数
　　4. 替代window.onload,可多次调用的加载函数：
  

• function iLoad(func) {    var oLoad=window.onload;    if(typeof window.onload!='function'){        window.onload=func;    }else{        window.onload=function(){            oLoad();            func();        }    }}
  

复制代码



　　5. 获取下一个元素节点：
  

• function nextElem(node){    if(node.nodeType==1) return node;    if(node.nextSibling) return nextElem(node.nextSibling);    return null;}
  

　　6. 获取上一个元素节点(此函数须调用第五条中的函数)：
  

• function prevElem(node){    if(node.nodeType==1){        return node;    }else if(node.previousSibling){        return nextElem(node.previousSibling);    }else{    return null;    }}
  

　　7. 原生JavaScript中有insertBefore方法,可惜却没有insertAfter方法,怎么办?用如下函数实现：
  

• function insertAfter(newChild,refChild){    var parElem=refChild.parentNode;    if(parElem.lastChild==refChild){        refChild.appendChild(newChild);    }else{        parElem.insertBefore(newChild,refChild.nextSibling);    }}
  

　　8. 为元素添加样式[记住是添加不是替换,相当于jQuery中的addClass(value)]：
  

• function addClass(elem,value){    if(!elem.className){        elem.className=value;    }else{        var oValue=elem.className;        oValue+=" ";        oValue+=value;        elem.className=oValue;    }}
  

　　9. 获取元素的样式：
  

• function getStyle(id,stylename){    var elem=$(id);    var realStyle=null;    if(elem.currentStyle){        realStyle=elem.currentStyle[stylename];    }else if(window.getComputedStyle){        realStyle=window.getComputedStyle(elem,null)[stylename];    }    return realStyle;}
  

　　10. 兼容事件绑定：
  

• function addEventSamp(obj,evt,fn){    if (obj.addEventListener) {        obj.addEventListener(evt, fn, false);    }else if(obj.attachEvent){        obj.attachEvent('on'+evt,fn);    }}
  

　　11. 移除事件：
  

• function removeEventSamp(obj,evt,fn){    if(obj.removeEventListener){        obj.removeEventListener(evt,fn,false);    }else if(obj.detachEvent){        obj.detachEvent('on'+evt,fn);    }}
  

　　12. 检测样式：
  

• function hasClass(element, className){    var reg = new RegExp('(\s|^)' + className + '(\s|$)');    return element.className.match(reg);}
  

　　13. 删除样式：
  

• function removeClass(element, className){    if (hasClass(element, className)) {        var reg = new RegExp('(\s|^)' + className + '(\s|$)');        element.className = element.className.replace(reg, ' ');    }}