http://xiangai.taobao.com
http://shop148612228.taobao.com

HTML5新的javascript选择器

新的选择器
document.querySelector("selector");
selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null;
支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+


document.querySelectorAll("selector");
selector:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+


document.getElementsByClassName("selector");
selector:根据类选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
支持: Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+

案例如下:
HTML结构如下:

复制代码
 1 <div class="content">  
 2 <ul>    
 3 <li>实例</li>
 4     
 5 <li class="exp">实例</li>
 6     
 7 <li class="exp">实例</li>
 8     
 9 <li class="exp">实例</li>
10     
11 <li>实例</li>
12 
13   </ul>
14 
15 </div>
复制代码

 

1、如果想要获得第一个li元素,我们只需要:
document.querySelector(".content ul li");


2、如果想要获得所有li元素,我们只需要:
document.querySelectorAll(".content ul li");


3、如果想要获得所有class为w3c的li元素,我们只需要:
document.getElementsByClassName("w3c");

posted @ 2012-12-08 22:42  万事俱备就差个程序员  阅读(219)  评论(0编辑  收藏  举报

http://xiangai.taobao.com
http://shop148612228.taobao.com
如果您觉得对您有帮助.领个红包吧.谢谢.
支付宝红包
微信打赏 支付宝打赏