javascript常用工具函数汇总

虽然jquery能简单的实现选取元素的功能，但有时候使用原生的javascript可以使得页面更简洁和效率更高，下面对一些常用的javascript 代码做了汇总：

1. 选取dom节点元素

• 使用元素的Id来获取元素

•  　function get(element){
   2 
   3 　　　　if(typeof element === "string"){
   4 
   5 　　　　　　element = document.getElementById(element);
   6 
   7 　　　　}
   9 　　　　return element;
   11 　　}　

   

• 使用元素的className获取元素

function getByClass(className, tag){
    tag = tag||document;
    className = className||'*';
    var findarr = [];
    if(document.getElementsByClassName){
        return document.getElementsByClassName(className);
    }
    el = document.getElementsByTagName(tag);
    var pattern = new RegExp("(^|\\s)" + className + (\\s|$)");
    for(var i=0; i<el.length; i++){
        if(pattern.test(el[i].className)){
            findarr.push(el[i]);
        }
    }
}

2. 从html字符串创建dom节点：

 

var toElement = function(){
    var div = d.createElement('div');
    return function(html){
        div.innerHTML = html;
        var el = div.childNodes[0];
        div.removeChild(el);
        return el;
    }
}();

 

3. 操作class函数

 

 //判断class是否存在
 function hasClass(ele , cls){
   return ele.className.match(new RegExp(‘(\\s|^)’+cls+'(\\s|$)'));               
 }

//给元素增加指定的类
function addClass(ele, cls){
  if(!hasClass(ele,cls)){
  ele.className += " "+cls;  
}  
}

//删除指定名字的类
function removeClass(ele , cls){
   var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
   ele.className = ele.className.replace(reg, " ");
}

4. 获取 xmlhttpRequest 对象

var getXhr = function(){
    var xhr;
    
    return function(){
        if (xhr) return xhr;
                
        if (typeof XMLHttpRequest !== 'undefined') {
            xhr = new XMLHttpRequest();
        } else {
            var v = [
                "Microsoft.XmlHttp",
                "MSXML2.XmlHttp.5.0",
                "MSXML2.XmlHttp.4.0",
                "MSXML2.XmlHttp.3.0",
                "MSXML2.XmlHttp.2.0"                    
            ];
            
            for (var i=0; i < v.length; i++){
                try {
                    xhr = new ActiveXObject(v[i]);
                    break;
                } catch (e){}
            }
        }             

        return xhr;
    }
}();

5. 获取文件名或文件后缀

 

//从路径中获取文件名

function fileFromPath(file){
  return file.replace(/.*(\/|\\)/,"");  
}

//获取文件后缀
function getExt(file){
    return (/[.]/.exec(file)) ? /[^.]+$/.exec(file.toLowerCase()) : '';
}

 

6. 获取元素相对于浏览器窗口偏移

//Ie7 下获取缩放因子
 function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }
   //对于支持getBoundingClientRect()属性的浏览器
function getOffsetRect(elem){
  var zoom =  GetZoomFactor();
  var box = elem.getBoundingClientRect(),
        body = document.body,
        docElem = document.documentElement,
        scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
        scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft,
        clientTop = docElem.clientTop || body.clientTop || 0,
        clientLeft = docElem.clientLeft || body.clientLeft || 0,
        top = box.top/zoom + scrollTop/zoom - clientTop,
        left = box.left/zoom + scrollLeft/zoom -clientLeft;
        return {top:Math.round(top),left:Math.round(left)}
}
   //对于不支持该属性的
function getOffsetSum(elem){
   var top = 0, left = 0;
        do {
            top += el.offsetTop || 0;
            left += el.offsetLeft || 0;
        }
        while (el = el.offsetParent);
        
        return {
            left: left,
            top: top
        };
}
function getOffset(elem){      
  if(elem.getBoundingClientRect){
    getOffsetRect(elem)
}  else{
     getOffsetSum(elem)
}
}        

7. 获取鼠标相对页面的坐标

function getMouseCoords(e){        
    // pageX/Y is not supported in IE
    // http://www.quirksmode.org/dom/w3c_cssom.html            
    if (!e.pageX && e.clientX){
        // In Internet Explorer 7 some properties (mouse coordinates) are treated as physical,
        // while others are logical (offset).
        var zoom = 1;    
        var body = document.body;
        
        if (body.getBoundingClientRect) {
            var bound = body.getBoundingClientRect();
            zoom = (bound.right - bound.left)/body.clientWidth;
        }

        return {
            x: e.clientX / zoom + d.body.scrollLeft + d.documentElement.scrollLeft,
            y: e.clientY / zoom + d.body.scrollTop + d.documentElement.scrollTop
        };
    }
    
    return {
        x: e.pageX,
        y: e.pageY
    };        

}

 8. 将一个字符串解析成xml 对象

function toXML(str){
            var doc = null;
            if(window.ActiveXObject){
                doc = new ActiveXObject('Microsoft.XMLDOM');
                doc.async = false;
                doc.loadXML(str);
            }else{
                doc = (new DOMParser()).parseFromString(str,'text/xml');
            }
            return doc;
}