DOM库及常用方法封装

节点

	nodeType	nodeName	nodeValue
元素节点	1	大写的标签名	null
文本节点	3	#text	文本内容
注释节点	8	#comment	注释内容
document	9	#document	null

DOM元素的增、删、改、移动

<div id="box">
    <div id="father"></div>
</div>

添加：

容器.appendChild(元素)

将元素添加到指定容器的末尾

var title = document.createElement('h3');
title.innerHTML = 'woshi nibaba';
father.appendChild(title);

容器.insertBefore(新元素,旧元素)

在指定容器内 将新元素插入到旧元素的前面

father.insertBefore(newTit, title);

移除：

容器.removeChild(元素)

在指定容器内 删除元素节点

father.removeChild(title);

替换：

容器.replaceChild(新元素，旧元素)

在指定容器内 用新元素替换掉 旧元素

box.replaceChild(title, father);

联想：参数是新，旧的函数，基本都是新的在前，旧的在后，唯有字符串方法的 str.replace() 第一个参数是旧的(str中的待替换的字符串或者相应的正则表达式),第二个参数是新的(替换成什么)

克隆：

要克隆的元素.cloneNode()

返回值就是克隆后的元素,默认只克隆当前元素 不会克隆子孙后代元素，如果为cloneNode(true) 则会克隆当前元素及子孙后代元素

移动:

利用DOM映射的特性

<div id="outer">
    <div id="middle">
        <div id="inner"></div>
    </div>
</div>

<script>
	setTimeout(function(){
		outer.appendChild(inner);
	}, 2000)
</script>

属性节点

创建：

目标对象.setAttribute("属性名","属性值")

会显示在html元素的标签内

获取：

目标对象.getAttribute("属性名")

自定义属性

obj.name="xxx

不会显示在html中

联想：jquery中获取表单元素自带的属性，比如checked等，需要使用ele.prop('checked')，ele.prop('checked', 'checked'); 不能用attr()，attr一般用于自己添加的属性节点。

 // 创建文档碎片
var frg = document.createDocumentFragment();

DOM库

var kirin = (function () {
    var isStanderBrowser = !!window.getComputedStyle;

    /**
     * 类数组转换为数组
     * @param likeAry
     * @returns {*} 数组
     */
    function listToArray(likeAry) {
        if (isStanderBrowser) {
            return Array.prototype.slice.call(likeAry);
        } else {
            var ary = [];
            for (var i = 0; i < likeAry.length; i++) {
                ary[ary.length] = likeAry[i];
            }
            return ary;
        }
    }

    /*  JSON字符串转换为为JSON对象
     *   @params: JSON字符串
     *   @return: JSON对象
     * */
    function jsonParse(jsonStr) {
        return window.JSON ? JSON.parse(jsonStr) : eval('(' + jsonStr + ')');
    }

    /**
     * 获取或者设置浏览器盒子模型的属性值
     * @param attr 属性
     * @param value 值
     * @returns 只传属性就是获取值，都传就是设置
     */
    function win(attr, value) {
        if (typeof value === 'undefined') {
            return document.documentElement[attr] || document.body[attr];
        }
        document.documentElement[attr] = value;
        document.body[attr] = value;
    }

    /**
     * 求元素相对于body的偏移量
     * @param ele 元素
     * @returns {{left: 左偏移, top: 上偏移}}
     */
    function offset(ele) {
        var l = null;
        var t = null;
        l += ele.offsetLeft;
        t += ele.offsetTop;
        var par = ele.offsetParent;
        while (par) {
            l += par.offsetLeft + par.clientLeft;
            t += par.offsetTop + par.clientTop;
            par = par.offsetParent;
        }
        return {left: l, top: t};
    }

    /**
     * 获取元素已经生成的样式值，兼容IE
     * @param ele 元素
     * @param attr 想要获取样式的属性
     * @returns {Number} 样式值
     */
    function getCss(ele, attr) {
        var val = null;
        if (isStanderBrowser) {
            val = window.getComputedStyle(ele)[attr];
        } else { // ie
            if (attr == 'opacity') {
                val = ele.currentStyle.filter; // alpha(opacity=55.5)
                var reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/;
                val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;
            } else {
                val = ele.currentStyle[attr];
            }
        }
        var reg = /^-?\d+(\.\d+)?(px)?$/;
        return reg.test(val) ? parseFloat(val) : val;
    }

    /**
     * 设置盒子模型的css样式
     * @param ele 元素
     * @param attr 元素样式属性名
     * @param value 设置的值
     */
    function setCss(ele, attr, value) {
        if (attr == 'opacity') {
            ele.style.opacity = value;
            ele.style.filter = 'alpha(opacity=' + value * 100 + ')';
            return;
        }
        if (attr == 'float') {
            ele.style.cssFloat = value;
            ele.style.styleFloat = value;   //ielow
            return;
        }
        var reg = /width|height|top|left|right|bottom|(margin|padding)(Left|Right|Top|Bottom)?/;
        if (reg.test(attr)) {
            if (!isNaN(value)) {
                value += 'px';
            }
        }
        ele.style[attr] = value;
    }

    /**
     * 根据类名获取元素(兼容ielow)
     * @param className 类名
     * @param context 确定查询范围,不传是document
     * @returns {*} 返回符合的元素集合
     */
    function getElesByClass(className, context) {
        context = context || document;
        if (isStanderBrowser) {
            return listToArray(context.getElementsByClassName(className));
        }
        // for ielow
        var classNameAry = className.replace(/(^ +| +$)/g, '').split(/ +/);
        var tags = context.getElementsByTagName('*');
        var ary = [];
        for (var i = 0; i < tags.length; i++) {
            var curTag = tags[i];
            var isGoodTag = true;
            for (var j = 0; j < classNameAry.length; j++) {
                var curClass = classNameAry[j];
                var reg = new RegExp('(^| +)' + curClass + '( +|$)');
                if (!reg.test(curTag.className)) {
                    isGoodTag = false;
                    break;
                }
            }
            isGoodTag && ary.push(curTag);
        }
        return ary;
    }

    /**
     * 批量设置元素样式
     * @param ele 元素
     * @param group {width: 100px, float: left}
     */
    function setGroupCss(ele, group) {
        if (Object.prototype.toString.call(group) == '[object Object]') {
            for (var key in group) {
                setCss(ele, key, group[key]);
            }
        }
    }

    /**
     * 把getCss、setCss、setGroupCss集成为一个方法
     * @param ele 元素名
     * @returns {Number} 如果是获取样式,就返回样式值
     */
    function css(ele) {
        var secondParam = arguments[1];
        var thirdParam = arguments[2];
        if (typeof secondParam == 'string') {
            if (typeof thirdParam == 'undefined') {
                return getCss(ele, secondParam);
            }
            setCss(ele, secondParam, thirdParam);
        }
        secondParam = secondParam || [];
        if (secondParam.toString() == '[object Object]') {
            setGroupCss(ele, secondParam);
        }
    }

    /**
     * 获取n到m间的随机整数
     * @param n
     * @param m
     * @returns {number}
     */
    function getRandom(n, m) {
        if (isNaN(n) || isNaN(m)) {
            return Math.random();
        }
        return Math.round(Math.random() * (m - n) + n);
    }

    /**
     * 判断元素是否有一个类名
     * @param ele
     * @param className
     * @returns {boolean}
     */
    function hasClass(ele, className) {
        return new RegExp('(^| +)' + className + '( +|$)').test(ele.className);
    }

    /**
     * 给元素添加类
     * @param ele
     * @param className
     */
    function addClass(ele, className) {
        var classAry = className.replace(/(^ +| +$)/g, '').split(/ +/);
        for (var i = 0; i < classAry.length; i++) {
            if (!hasClass(ele, classAry[i])) {
                ele.className += ' ' + classAry[i];
            }
        }
    }

    /**
     * 给元素移除类
     * @param ele
     * @param className
     */
    function removeClass(ele, className) {
        var classAry = className.replace(/^ +| +$/g, '').split(/ +/);
        for (var i = 0; i < classAry.length; i++) {
            var curClass = classAry[i];
            if (hasClass(ele, curClass)) {
                var reg = new RegExp('(^| +)' + curClass + '( +|$)', 'g');
                ele.className = ele.className.replace(reg, ' ');
            }
        }
    }

    /**
     * 获取上一个哥哥元素节点
     * @param ele
     * @returns {*}
     */
    function prev(ele) {
        if (isStanderBrowser) {
            return ele.previousElementSibling;
        }
        var pre = ele.previousSibling;
        while (pre && pre.nodeType != 1) {
            pre = pre.previousSibling;
        }
        return pre;
    }

    /**
     * 获取下一个弟弟元素节点
     * @param ele
     * @returns {*}
     */
    function next(ele) {
        if (isStanderBrowser) {
            return ele.nextElementSibling;
        }
        var nex = ele.nextSibling;
        while (nex && nex.nodeType != 1) {
            nex = nex.nextSibling;
        }
        return nex;
    }

    /**
     * 获取所有哥哥元素节点
     * @param ele
     * @returns {Array.<*>}
     */
    function prevAll(ele) {
        var ary = [];
        var pre = prev(ele);
        while (pre) {
            ary.push(pre);
            pre = prev(pre);
        }
        return ary.reverse();
    }

    /**
     * 获取所有弟弟元素节点
     * @param ele
     * @returns {Array}
     */
    function nextAll(ele) {
        var ary = [];
        var nex = next(ele);
        while (nex) {
            ary.push(nex);
            nex = next(nex);
        }
        return ary;
    }

    /**
     * 获取所有兄弟元素节点
     * @param ele
     * @returns {Array.<*>}
     */
    function siblings(ele) {
        return prevAll(ele).concat(nextAll(ele));
    }

    /**
     * 获取当前元素的索引
     * @param ele
     * @returns {Number}
     */
    function index(ele) {
        return prevAll(ele).length;
    }

    function children(ele, tagName) {
        var ary = [];
        if (isStanderBrowser) {
            ary = listToArray(ele.children);
        } else {
            var childs = ele.childNodes;
            for (var i = 0; i < childs.length; i++) {
                if (childs[i].nodeType == 1) {
                    ary.push(childs[i]);
                }
            }
        }

        if (typeof tagName == 'string') {
            for (var i = 0; i < ary.length; i++) {
                if (ary[i].nodeName !== tagName.toUpperCase()) {
                    ary.splice(i, 1);
                    i--;
                }
            }
        }
        return ary;
    }

    return {
        listToArray: listToArray,
        jsonParse: jsonParse,
        win: win,
        offset: offset,
        getCss: getCss,
        setCss: setCss,
        css: css,
        getElesByClass: getElesByClass,
        getRandom: getRandom,
        hasClass: hasClass,
        addClass: addClass,
        removeClass: removeClass,
        prev: prev,
        next: next,
        prevAll: prevAll,
        nextAll: nextAll,
        siblings: siblings,
        index: index,
        children: children
    }
})();