どの牛も子牛も自分の庫であるDOM処理を持つべきだという.

ここ数日考えを整理してみると、DOM部分はいろいろあると思っていたのですが、急に頻繁に使われているのはそれほど多くないことに気づきました

class

class処理部分は主に4つあります
hasClass:要素にclassが含まれているかどうかを確認します.
addClass:要素にclassを追加する
removeClass:要素のclassを削除する
toggleClass:要素のclassを切り替え、1つのclassだけが入力された場合、このclassの有無を切り替えます.2つの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);
                }
            }
        },

 

要素サイズ

エレメントサイズには2つの方法があります
getRect:要素サイズを取得し、上下左右4辺の位置を含む
getViewPortSize:表示ウィンドウ(スクロールバーなし)のサイズを取得する
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)

       };
        },

 

要素の位置

getScrolPos:要素スクロールバーの位置を取得する
getViewPortPos:表示ウィンドウ(スクロールバーを除く)に対する要素の位置を取得します.
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.最近会社は忙しくて、こんなに长い间引き延ばしてやっと补って、内容が少なくないため、别に1篇のどの牛も子牛も自分の庫を持つべきだという。を书いて、また今回书いた慌ただしいため、多くの抜け穴を除いて、みんなに感谢して指导を惜しまないで、感じは进歩しました