DOM处理

DOM处理

这几天整理了一下思路，本来觉得DOM部分会有很多东西，但是忽然发现频繁使用的其实并不太多

class

class处理部分主要有四个

hasClass：检查元素是否包含某个class

addClass：为元素添加一个class

removeClass：为元素删除一个class

toggleClass:切换元素的class， 如果只传入一个class，则切换这个class的有无；如果传入两个class，则元素删除当前class，替换为另一个

hasClass : function(element, className) {
            var re = new RegExp("\b" + className + "\b", "i");
            if (element.className.match(re))
                return true;
            return false;
        },

        addClass : function(element, className) {
            var re = new RegExp("\s*" + className, "gi");
            var eleClass = element.className;
            if (!eleClass.match(re))
                element.className = eleClass + " " + className;
        },

        removeClass : function(element, className) {
            var re = new RegExp("\s*" + className, "gi");
            var eleClass = element.className;
            eleClass = eleClass.replace(re, "");
            if (element.className != eleClass)
                element.className = eleClass;
        },
        
        toggleClass:function(element,class1,class2){
            if(class2!=undefined){
                if(ssLib.hasClass(element,class1)){
                    ssLib.removeClass(element,class1);
                    ssLib.addClass(element,class2);
                }else if(ssLib.hasClass(element,class2)){
                    ssLib.removeClass(element,class2);
                    ssLib.addClass(element,class1);
                }
            }else{
                if(ssLib.hasClass(element,class1)){
                    ssLib.removeClass(element,class1);
                }else{
                    ssLib.addClass(element,class1);
                }
            }
        },

元素尺寸

元素尺寸有两个方法

getRect：获取元素尺寸，同时包含其上下左右四个边的位置

getViewPortSize：获取可视窗口（ViewPort，不含滚动条）尺寸

getScrollSize：获取元素（包含滚动条）尺寸

getRect : function(element) {
            var rect = element.getBoundingClientRect();
            if (typeof rect.width == 'undefined') {
                _rect = {
                    width : rect.right - rect.left,
                    height : rect.bottom - rect.top,
                    top : rect.top,
                    bottom : rect.bottom,
                    left : rect.left,
                    right : rect.right
                };
                return _rect;
            }
            return rect;
        },

        getViewPortSize : function() {
            if (document.compatMode == "CSS1Compat") {
                return {
                    width : document.documentElement.clientWidth,
                    height : document.documentElement.clientHeight
                };
            } else {
                return {
                    width : document.body.clientWidth,
                    height : document.body.clientHeight
                };
            }
        },

        getScrollSize : function(element) {
            var e = element
                    || (document.compatMode == "CSS1Compat" ? 
                            document.documentElement: document.body);
            return {
               width : Math.max(element.scrollWidth, element.clientWidth),
               height : Math.max(element.scrollHeight, element.clientHeight)

       };
        },

元素位置

getScrollPos:获取元素滚动条位置

getViewPortPos：获取元素相对于可视窗口（ViewPort，不包括滚动条）的位置

getAbsolutePos：获取元素相对于文档（包含滚动条）位置

getOffsetPos：获取文档相对于父容器位置

getScrollPos : function(element) {
            var e = element
                    || (document.compatMode == "CSS1Compat" ? document.documentElement
                            : document.body);
            return {
                x : e.scrollTop,
                y : e.scrollLeft
            };
        },

        getViewPortPos : function(element) {
            var rect = element.getBoundingClientRect();
            return {
                x : rect.left,
                y : rect.top
            };
        },

        getAbsolutePos : function(element) {
            var rect=element.getBoundingClientRect();
            var doc = document.compatMode == "CSS1Compat" ? document.documentElement
                    : document.body;
            return{
                x:rect.left+Math.max(doc.scrollLet,doc.clientLeft),
                y:rect.top+Math.max(doc.scrollTop,doc.clientTop)
            };
        },
        
        getOffsetPos:function(element){
            return{
                x:element.offsetLeft,
                y:elementoffsetTop
            };
        }

元素属性/样式

这个借鉴了一下jQuery的写法

attr:获取/设置元素的属性值

css：获取/设置元素的style

这两个函数是临时想到的，还没想好怎么写，明天晚上补上吧

 

 

分类: 自备JavaScript库