打造自己的js库1 -- dom操作的封装

打造自己的js库1.1

 

前言：

当前已经有许多非常成熟的js框架，如jquery,prototype,yui等等，他们各有特色，但也有许多相同的特性，他们都是由许多基础的js函数组建而成。而js库不同于框架，我们在这里只是把常用的js操作制作成函数然后整合为自己的一个js库，当然，当这些操作积累到一定程度，也通过使用一些设计模式，分类而演变成属于自己的一个mini js框架。好了，我们从基础的部分开始吧。

 

Js最常用的操作就是对dom的操作，所以我们的封装也从对dom的操作开始。

 

1.得到dom元素

得到dom元素的方法有很多种，当然也多强大的框架提供了dom元素获取的方法，比如jquery 的sizzle就是一个纯js的CSS 选择器引擎，在这里我们做不到这么复杂，只是应对常用的选择操作。

var Choose = function(selector, context){context = context || document;var result = [],idElem = new RegExp("^#[a-zA-Z0-9\\-]*"),classElem = new RegExp("^\\.{1}[a-zA-Z0-9\\-]*"),tagElem = new RegExp("^[a-zA-Z0-9\\-]*$");_selector = selector.substring(1,selector.length);var hasClass = function(element,className){var reg = new RegExp("\\s|<span style="font-family: Arial, Helvetica, sans-serif;">^</span><span style="font-family: Arial, Helvetica, sans-serif;">" + className +"\\s|$");</span>return reg.test(element.className);},getByClass = function(className){var result = [],nodes = context.getElementsByTagName("*");for(var i = 0;i < nodes.length;i++){if( hasClass(nodes[i],className) ){result[result.length] = nodes[i];}}return result;};//如果不是dom元素，nodeType == 9 为document ==3 为普通的domif (!context.nodeType || (context.nodeType != 9 && context.nodeType != 1)){return result;}//是id选择器if (selector.match(idElem) && selector.match(idElem)[0].length == selector.length){result[result.length] = context.getElementById(_selector);return result;} else if (selector.match(classElem) && selector.match(classElem)[0].length == selector.length){//如果是类选择器if(document.getElementsByClassName)return context.getElementsByClassName(_selector);return getByClass(_selector);} else if (selector.match(tagElem) && selector.match(tagElem)[0].length == selector.length){//如果是名称选择器return context.getElementsByTagName(selector);} else {//其他选择器 兼容ie8+if(document.querySelectorAll)return context.querySelectorAll(selector);return [];}};

上述代码对应了4种情况的选择，分别是 id class tagName 和通过css选择，不过最后一种方法只支持IE8+浏览器。

2.子元素遍历，该函数通过递归遍历子元素，用户可以指定一个filter来过滤不需要的dom

var nodeIntor = function(){var //保存this指针_this,//保存所有符合条件的nodenodes = [],//加入符合条件的函数callback = function(node) {//过滤textif(_this.filter(node) && node.nodeType == 1) {nodes[nodes.length] = node;}},//遍历nodeprocessElements = function(node, isOuter) {var children = node.hasChildNodes()?node.childNodes:[];for(var i = 0;i < children.length;i++) {//递归遍历if( children[i].hasChildNodes() ) {processElements(children[i]);}callback.call( this, children[i] );}if(isOuter)callback.call( this, node );},//初始化函数init = function(selector, filter){this.root = Choose(selector)[0];  // || documentthis.filter = filter;_this = this;processElements(this.root,true);};return {traverse : init,nodes : nodes}}();

3.属性设置/获取

var attr = function(selector, key, value){var node = Choose(selector)[0];if(value){node.setAttribute(key, value);}return node.getAttribute(key);};

4.设置/获取元素的css属性

var css = function(){var pfx = function(style){//得到符合的前缀var s = "Webkit,Moz,O,ms,Khtml",pre = s.split(","),tNode = document.createElement("div");for(var i = 0;i < pre.length;i ++) {//重新组装stylevar reStyle = pre[i] + style.charAt(0).toUpperCase() + style.substr(1);if( tNode.style[reStyle] != undefined){return reStyle;}}return style;},setCss = function(node, styles){if (typeof styles === 'object'){for (var i in styles){node.style[pfx(i)] = styles[i];}}},getCss = function(node, style){//兼容ie ffvar styles = window.getComputedStyle ? window.getComputedStyle(node,null) : obj.currentStyle;return styles [pfx(style)];}return {setCss : setCss,getCss : getCss}}();

以上内容均为本人原创，转载请注明出处，欢迎大家批评指正。