據說每個大牛、小牛都應該有自己的庫——DOM處理

謙行發表於2013-09-08

這幾天整理了一下思路，本來覺得DOM部分會有很多東西，但是忽然發現頻繁使用的其實並不太多

class

class處理部分主要有四個

hasClass：檢查元素是否包含某個class

addClass：為元素新增一個class

removeClass：為元素刪除一個class

toggleClass:切換元素的class， 如果只傳入一個class，則切換這個class的有無；如果傳入兩個class，則元素刪除當前class，替換為另一個

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

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

        removeClass : function(element, className) {
            var re = new RegExp("(^|\\s)" + className + "(\\s|$)", "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

這兩個函式是臨時想到的，還沒想好怎麼寫，明天晚上補上吧

PS.最近公司太忙，拖了這麼久終於補上了，由於內容不少，另外寫了一篇據說每個大牛、小牛都應該有自己的庫——DOM處理續，另外由於這次寫的倉促，除了很多漏洞，謝謝大家不吝指教，感覺進步了很多

相關文章