更方便的DOM选择器 querySelector

用过jQuery或者一些其它js库的少年们都应该知道他们都有自己的选择器,使用起来各种方便各种狂拽酷霸吊,简化了原本元素获取的许多麻烦。
 
用jQuery来举个例子,比如你要获取id为f_ck的元素(第一个)

这样就得到了元素的jquery对象(这么说是因为指针还被绑上了jquery的方法)
用传统的getelement的话会是这个样子

这么写明显长一点而且得到的只是个指针。
 
关键问题其实不在这里,在于通过其他属性获取元素,而每个属性都需要一个方法例如

 
 
 
简直丧心病狂-_-|||
 
 
于是我刚刚翻js书的时候发现了另一种获取元素的方法,这是一种新方法,可以像jquery那样方便地获取元素
一共有两个可用函数

首先还是要说一下使用方法的

是不是和jquery的获取方法很像呢
 
举点其它例子

querySelectorAll()的使用方法相同
 
 
 
它们的区别在于:querySelector()只会获取符合条件的第一个元素,返回的是一个元素。而querySelectorAll()返回的是一个Nodelist,你可以看作是一个数组(经博主测试,就算是通过id获取也会返回一个数组,而且有多个同id的元素的话也都会返回)
相同点在于没有匹配元素的话返回的是一个空数组(length==0)
 
这看起来书写长度好像也和之前的差不多嘛,为什么说它方便呢,因为这种元素获取方式只有一种,但是可以使用多种条件,所以我们可以把它装进一个自定义函数里面来缩短它

这样子的话上面的例子就可以缩短成

是不是一下子就清晰简短了很多呢?
你会发现我在每句后面还都加了个[0],因为前面的例子用的是querySelector(),返回的直接是第一个元素,函数里写的是querySelectorAll(),返回的是一个Nodelist,为了达到相同效果即加上[0]提取出第一个元素。当然你很计较内存使用和运行速度的话就给它们分别定义短名函数。
 
 
 
 
 
现在是2:43分了。。。困死了困死了困死了困死了困死了困死了困死了困死了困死了困死了困死了困死了困死了





如文中无特殊说明,本站均使用以下协议:知识共享许可协议
知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。