这几天整理了一下思路，本来觉得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.最近公司太忙，拖了这么久终于补上了，由于内容不少，另外写了一篇，另外由于这次写的仓促，除了很多漏洞，谢谢大家不吝指教，感觉进步了很多