其实任何语言的操作也就是4个字：增 删 改 查。整个网页中，我们都一直强调HTML CSS JS分离，也就是行为，样式，结构互相独立。通过修改CSS样式达到美观的效果。在实际开发中，我们不得不用JS的动态形式去修改样式都操作。通过之前我们对JS的基础学习，我们也学习过很多获得元素的方式 。比如：document.getElementById()，获得单个元素。document.getElementsByTagName()；获得一组元素。document.children，获得所有的子元素。等等方式.
当然我们也有了另一个选择器，document.querySelector()，获得单个元素，document.querySelectorAll()获得一组元素。不过这个方法，有兼容问题。一些低版本的浏览器不支持这个方法。那么我们有没有更好的方式来整合到一起呢？如果浏览器直持，那就用querySelector这个选择器，如果不支持就用传统的选择器来获得元素。我自己也总结了一下，就用querySelector这个选择器写了一个小工具，后续我再把改进版的工具分享给大家。
还是用闭包的方式来实现，方便调用，变量也不会污染，也符合耦合思想和组件化和模块化的主题。闭包的使用在这就不做过多的解释了。关于闭包，主流的写法大概就两种，其实都不难理解，我就先给大家看一下。（function(){}）()和（function(){}()）。前者见的比较多，后者可能大家偶尔会看到，我自己习惯性的喜欢用第二种。写这个小工具，我会用到到数组的的一些方式。以及面向对象的一些小技巧，上下调用（call与apply），还用了回调函数的技巧。
话不多说，上代码，注释我也就写在一起了。
(function(window, undefined) {}(window))
//拆分FOR
function each(arr, callback) {
//for循环
for(var i = 0; i < arr.length; i++) {
//如果满足条件跳出，用call连接
if(callback.call(arr[i], i, arr[i]) === false) {
//跳出
break;
}
}
//返回数组
return arr;
};
//选择器
function select(selector, results) {
//申明数组
results = results || [];
//用数组接收,，利秀apply，数组放前面
Array.prototype.push.apply(results, document.querySelectorAll(selector));
//返回数组
return results;
}
//定义工具
window.ddTools=window.dd={
each:each,
select:select
}
}(window))