关于封装部分DOM操作的方法

window.utils = {
    /关于DOM操作js开始/
    /**
     * 定义一个获取元素的方法
     * @param param
     * @returns {*}
     */
    $$: function(param) {
        if ((typeof param).toUpperCase() == "STRING") {
            var fparam = param.charAt(0); //获取第一位
            if (fparam == "#") {
                return document.getElementById(param.substring(1));
            } else if (fparam == ".") {
                var param = param.substring(1);
                if (document.getElementsByName) {
                    return document.getElementsByClassName(param);
                } else {
                    var all = document.getElementsByTagName("*");
                    var allClass = [];
                    for (var i = 0; i < all.length; i++) {
                        var arr = all[i].className.split(" ");
                        for (var j = 0; j < arr.length; j++) {
                            if (arr[j] == param) {
                                allClass.push(arr[j]);
                            }
                        }
                    }
                    return allClass;
                }
            } else {
                return document.getElementsByName(param);
            }
        }
    },
    /**
     * 获取class类名,注意返回的是一个数组,需要写上下标
     * @param className
     * @param parent
     * @returns {*}
     */
    getClassName: function(className, parent) {
        var parent = parent || document;
        if (parent.getElementsByClassName) {
            return parent.getElementsByClassName(className);
        }
        var all = parent.getElementsByTagName("*");
        var allClass = [];
        for (var i = 0; i < all.length; i++) {
            var arr = all[i].className.split(" ");
            for (var j = 0; j < arr.length; j++) {
                if (arr[j] == className) {
                    allClass.push(all[i]);
                }
            }
        };
        return allClass;
    },
    /**
     * 获取id的方法
     * @param id
     * @returns {Element}
     */
    getId: function(id) {
        return document.getElementById(id);
    },
    /**
     * 获取元素样式方法
     * @param obj:对象
     * @param attr:获取样式名称,注意复合属性获取不到
     * @returns {*}
     */
    getStyle: function(obj, attr) {
        attr = attr.trim(); //去除前后空格,以防万一
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        };
    },
    /**
     * 设置元素样式
     * @param obj
     * @param json:传递的是一个json对象
     */
    setStyle: function(obj, json) {
        for (var key in json) {
            obj.style[key] = json[key];
        };
    },
    /**
     * 获取第一个节点元素
     * @param parent:父节点元素
     * @returns {*}
     */
    firstChild: function(parent) {
        if (parent.firstElementChild) {
            return parent.firstElementChild;
        } else {
            return parent.firstChild;
        };
    },
    /**
     * 获取最后一个元素节点的方法
     * @param parent:父节点
     * @returns {*}
     */
    lastChild: function(parent) {
        if (parent.lastElementChild) {
            return parent.lastElementChild;
        } else {
            return parent.lastChild;
        };
    },
    /**
     * 获取下一个元素节点
     * @param obj
     * @returns {*}
     */
    next: function(obj) {
        if (this.lastChild(this.parent(obj)) != obj) {
            if (obj.nextElementSibling) {
                return obj.nextElementSibling;
            } else {
                return obj.nextSibling;
            };
        } else {
            return obj;
        };
    },
    /**
     * 获取元素的上一个节点
     * @param obj
     * @returns {*}
     */
    prev: function(obj) {
        if (this.firstChild(this.parent(obj)) != obj) {
            if (obj.previousElementSibling) {
                return obj.previousElementSibling;
            } else {
                return obj.previousSibling;
            };
        } else {
            return obj;
        };
    },
    /**
     * 获取元素的父节点
     * @param obj
     * @returns {*}
     */
    parent: function(obj) {
        if (obj.parentNode) {
            return obj.parentNode;
        } else {
            return obj;
        };
    },
    /**
     * 获取兄弟节点
     * @param obj:获取对象的一个
     * @param callback:可选的参数
     * @returns {Array}
     */
    siblings: function(obj, callback) {
        var result = [];
        var parent = this.parent(obj);
        var all = parent.children;
        for (var i = 0; i < all.length; i++) {
            if (all[i] != obj) {
                result.push(all[i]);
                callback && callback.call(all[i]);
            }
        };
        return result;
    },
    /**
     * 获取一个元素的距离文档的位置,类似jQ中的offset()
     * @param obj
     * @returns {{left: number, top: number}}
     */
    offset: function(obj) {
        var pos = { left: 0, top: 0 };
        while (obj) {
            pos.left += obj.offsetLeft;
            pos.top += obj.offsetTop;
            obj = obj.offsetParent;
        };
        return pos;
    },
    /**
     * 获取与设置元素自定义属性,可以接收2个或者3个参数
     * 2个参数的时候是获取自定义属性,3个参数是设置自定义属性
     * @returns {*|string|String}
     */
    attr: function() {
        if (arguments.length < 2 || typeof arguments[0] != "object" || arguments.length > 3) {
            return;
        };
        //如果存在第二个参数的时候,就是设置自定义属性
        if (arguments[2]) {
            return arguments[0].setAttribute(arguments[1], arguments[2]);
        } else {
            return arguments[0].getAttribute(arguments[1]);
        };
    },
    /**
     * 删除自定义属性
     * @param obj
     * @param attr
     * @returns {*}
     */
    removeAttr: function(obj, attr) {
        return obj.removeAttribute(attr);
    },
    /**
     * 定义一个绑定事件的方法
     * @param obj  绑定对象
     * @param event  事件方法
     * @param callback  执行函数
     */
    bind: function(obj, event, callback) {
        if (obj.addEventListener) {
            obj.addEventListener(event, callback, false);
        } else if (obj.attachEvent) {
            obj.attachEvent("on" + event, callback);
        } else {
            obj["on" + event] = callback;
        };
    },
    /**
     * 封装一个事件绑定的方法
     * @param dom
     * @param eventType
     * @param eventElement
     * @param calback
     */
    on: function(dom, eventType, eventElement, calback) {
        dom.addEventListener(eventType, function(ev) {
            if (ev.target.tagName.toLowerCase() == eventElement) {
                //执行的方法要操作的对象的当前目标对象,所以用call去改变指向
                calback.call(ev.target, ev.target);
            };
        }, false);
    },
    /**
     * 获取滚动条的高度
     * @returns {Number|number}
     */
    scrollTop: function() {
        return document.documentElement.scrollTop || document.body.scrollTop;
    },
    /**
     * 添加样式
     * @param obj
     * @param className
     */
    addClass: function(obj, className) {
        if (obj.className == "") {
            obj.className += className
        } else {
            var arrClass = obj.className.split(" ");
            var index = classIndex(arrClass, className);
            if (index == -1) {
                arrClass.push(className);
                obj.className = arrClass.join(" ")
            }
            console.log(arrClass)
        }
    },
    /**
     * 删除样式
     * @param obj
     * @param className
     */
    removeClass: function(obj, className) {
        var arrClass = obj.className.split(" ");
        var index = classIndex(arrClass, className);
        if (index != -1) {
            arrClass.splice(index, 1)
            obj.className = arrClass.join(" ")
        }
    },
    /**
     * 获取鼠标的位置
     * @param {Object} event
     */
    tm_posXY: function(event) {
        event = event || window.event;
        var posX = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
        var posY = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
        return {
            x: posX,
            y: posY
        };
    },
    /**
     * 获取窗体可见度高度
     */
    getClientHeight: function() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
        } else {
            clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
        }
        return clientHeight;
    },
    /**
     * 获取窗体可见度宽度
     */
    getClientWidth: function() {
        var clientWidth = 0;
        if (document.body.clientWidth && document.documentElement.clientWidth) {
            clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
        } else {
            clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
        }
        return clientWidth;
    },
    /**
     * 获取滚动条的高度
     */
    getScrollHeight: function() {
        return Math.max(getClientHeight(), document.body.scrollHeight,
            document.documentElement.scrollHeight);
    },
    /**
     * 获取到滚动条顶部的距离
     */
    getScrollTop: function() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }
    /关于DOM操作js结束/
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水痕01

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值