写querySelector/querySelectorAll写烦了?进来看看吧...

首先,这个方法不考虑ie9以及同等浏览器以下的兼容问题.....
对了,安卓版本实在低的浏览器也不考虑~(像什么安卓2.3之类的......)
本菜鸡没ios设备,没办法知道兼容情况......

这是废话

讲真的,写querySelector/querySelectorAll写得我不知道多烦躁...
虽然hb或者sublime有文本提示功能...
但是代码量讲真的也是有点大的啊...
好了,废话说了这么多~
来点干的了吧~
先直接上代码...
各位大神献丑了....

document.find = function(selector){  
    return this.querySelector(selector);  
}  
document.findAll = function(selector){  
    return this.querySelectorAll(selector);  
}  
HTMLElement.prototype.find = function(selector){  
    return this.querySelector(selector);  
};  
HTMLElement.prototype.findAll = function(selector){  
    return this.querySelectorAll(selector);  
}

好了.献丑讲下那几个方法的说明吧~~

document.find和document.findAll

js里可以用点(.)来给对象添加方法/属性,没毛病吧~
function里的this指向的就是被添加方法/属性的那个对象~

HTMLElement.prototype.find和HTMLElement.prototype.findAll

HTMLElement是个啥?
我自己通俗的理解就是页面上的像body啊,div啊,p啊...之类的标签在js中的表达方式~
(讲得不对还请大神指正)
具体的点我看W3C的解释吧
prototype又是个啥?
它是js中所有对象都带有的一个属性(不过document和window就没,不知道为啥,还请大神指点),
这个属性可以向对象添加属性/方法
详细的prototype解释看这里
function里的内容见document.find和document.findAll
来点实际的应用吧~

DEMO

    这是部分html代码如下(默认已经把上述js代码保存到script.js中)  

<div class="wrap">  
        <p class="conetent">这是第一段文字</p>  
</div>  
<div class="wrap">  
        <p class="conetent">这是第二段文字</p>  
</div>  
<script src="./js/script.js"></script>

    这是部分js代码

var wrap = document.find('.wrap'),  
        //或者直接document.find('.content'),  
        //我这里写warp.find('.content')是因为有个现成的wrap  
        content = wrap.find('.content'),  
        allWrap = document.findAll('.wrap'),  
        allContent = document.findAll('.conetent');

输出结果

输出结果是啥??
输出结果自己试试吧~