第87天：HTML5中新选择器querySelector的使用

程序员永力技术 2022年11月6日

0 收藏 438 点赞 1,139 浏览 1052 个字

一、HTML5新选择器

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

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

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

4、注意：

document.querySelector(selector);//返回第一个满足选择器条件的元素，一个DOM对象
document.querySelectorAll（selector);//返回所有满足该条件的元素，元素类型是dom的数组
$(‘.item’);//返回一个jQuery对象（dom元素的数组）
本质上jQuery方式和querySelector方式都是获取DOM数组，只不过jquery会多一些其他成员
DOM数组的每一个成员注册事件不能像jquery一样直接注册，必须分别给每个元素注册
html5就是将经常需要的操作又包装一层

实例：

 <div class="content">　　
 <ul>　　　　
 <li>实例</li>
 　　　　
 <li class="exp">实例</li>
 　　　　
 <li class="exp">实例</li>
 　　　　
 <li class="exp">实例</li>
 　　　　
 <li>实例</li> 　　</ul> </div>

（1）如果想要获得第一个li元素，我们只需要:
　　document.querySelector(“.content ul li”);

（2）如果想要获得所有li元素，我们只需要:
　　document.querySelectorAll(“.content ul li”);

（3）如果想要获得所有class为w3c的li元素，我们只需要:
　　document.getElementsByClassName(“w3c”);