我师父（http://www.cnblogs.com/aaronjs/）说应当阅读框架（jquery），所以老夫就准备开始看了
然后公司的师兄原来写了个dom选择器，感觉不错啊！！！原来自己从来没有想过能写这些，所以我们今天一起来试试吧
我写的这个很简单，就是最简单的那种了，但是公司师兄写的很好。。。。。。
简单dom选择器
先上个完整的代码吧，因为我已经写起了：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 </head> 5 <body> 6 <div id="parent"> 7 <div class="child1" id="c"> 8 <div> 9 </div> 10 <input type="button" value="测试" class="child1.1" /> 11 </div> 12 <div class="child1"> 13 </div> 14 <div class="child2"> 15 </div> 16 <div class="child2 child1"> 17 <div class="child1.1"> 18 <input class="l" value="三层测试" /> 19 </div> 20 </div> 21 <input type="button" value="测试2" /> 22 </div> 23 <script type="text/javascript"> 24 25 (function () { 26 var queryFunc = { 27 '#': function (id) { 28 var arr = []; 29 arr.push(document.getElementById(id)) 30 return arr; 31 }, 32 '.': function (className) { 33 var els = document.getElementsByTagName('*'); 34 var reg = new RegExp('(^|\\s)' + className + '(\\s|$)'); 35 var arr = []; 36 for (var i = 0, len = els.length; i < len; i++) { 37 if (reg.test(els[i].className)) { 38 arr.push(els[i]); 39 } 40 } 41 return arr; 42 }, 43 'tag': function (tag) { 44 return document.getElementsByTagName(tag); 45 } 46 }; 47 48 var filterFunc = { 49 '#': function (el, id) { 50 return this.commomFunc(el, function (p) { 51 if (p.id == id) { 52 return true; 53 } 54 }); 55 }, 56 '.': function (el, className) { 57 var reg = new RegExp('(^|\\s)' + className + '(\\s|$)'); 58 return this.commomFunc(el, function (p) { 59 if (reg.test(p.className)) { 60 return true; 61 } 62 }); 63 }, 64 'tag': function (el, tag) { 65 return this.commomFunc(el, function (p) { 66 if (p.tagName.toLowerCase() == tag) { 67 return true; 68 } 69 }); 70 }, 71 commomFunc: function (el, callback) { 72 var p = el; 73 var end = false; 74 while (!end) { 75 p = p.parentNode || p.parentElement || null; 76 if (!p) return false; 77 var b = callback && callback(p); 78 if (b) return b; 79 if (p.tagName == 'BODY') { 80 end = true; 81 } 82 } 83 return false; 84 } 85 }; 86 87 var getKV = function (str) { 88 if (!str || typeof str != 'string') return null; 89 var k = str.substring(0, 1); 90 var v = str; 91 if (k == '.' || k == '#') { 92 v = str.substring(1, str.length); 93 } else { 94 k = 'tag'; 95 } 96 return { 97 k: k, 98 v: v 99 }; 100 } 101 102 var query = function (str) { 103 var kv = getKV(str) 104 return (queryFunc[kv.k] && queryFunc[kv.k](kv.v)); 105 }; 106 var filter = function (el, str) { 107 var kv = getKV(str); 108 return (filterFunc[kv.k] && filterFunc[kv.k](el, kv.v)); 109 }; 110 var explodeSelector = function (str) { 111 if (!str) return []; 112 //第一步去掉多余的空格 113 str = str.replace(/\s+/g, ' '); 114 var arr = str.split(' '); 115 return arr; 116 }; 117 //筛选元素是否具有该属性 118 119 var queryAll = function (str) { 120 var arrSelector = explodeSelector(str); 121 var len = arrSelector.length; 122 123 //当前索引 124 var index = len - 2; 125 var curDom = null; 126 var curSelector = null; 127 128 //第一轮筛选出来的元素 129 var els = query(arrSelector[len - 1]); 130 //只有一个选择器便直接返回了 131 if (len == 1) return els; 132 133 while (index != -1) { 134 //获取当前的筛选选择器 135 curSelector = arrSelector[index]; 136 var tmpArr = []; 137 for (var i = 0, len = els.length; i < len; i++) { 138 var tmpEl = els[i]; 139 if (filter(tmpEl, curSelector)) 140 tmpArr.push(tmpEl); 141 } 142 els = tmpArr; 143 index--; 144 } 145 return els; 146 }; 147 window.queryAll = queryAll; 148 })(); 149 150 var selector = [ 151 'div', 152 'div input', 153 '#parent', 154 '#parent .child1', 155 '#parent .child2', 156 '.child1 .child1.1', 157 '#c .child1.1', 158 '#parent .child1 .child1.1 input' 159 ]; 160 161 for (var i in selector) { 162 console.log(selector[i] + '——' + queryAll(selector[i])); 163 var s = ''; 164 } 165 166 </script> 167 </body> 168 </html>