一,HTML5新选择器
1,文件。querySelector(“selector”);
选择器:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null ;
支持:Chrome 4.0 +,FireFox 3.5 +,Safari 3.2 +,Opera 10.1 +,IE 8+
2,文档。querySelectorAll(“selector”);
选择器:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
支持:Chrome 4.0 +,FireFox 3.5 +,Safari 3.2 +,Opera 10.1 +,IE 8+
3,文件。getElementsByClassName(“selector”);
选择器:根据类选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;
支持:Chrome 4.0 +,FireFox 3.0 +,Safari 3.2 +,Opera 10.1 +,IE 8+
4,注意:
- 文献。querySelector(selector); //返回第一个满足选择器条件的元素,一个DOM对象
- 文献。querySelectorAll(selector); //返回所有满足该条件的元素,元素类型是dom的数组
- $( '项目'); //返回一个jQuery的对象(DOM元素的数组)
- 本质上jQuery的方式和querySelector方式都是获取DOM数组,只不过的jquery会多一些其他成员
- DOM数组的每一个成员注册事件不能像jQuery的一样直接注册,必须分别给每个元素注册
- HTML5就是将经常需要的操作又包装一层
实例:
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元素,我们只需要:
文件。querySelectorAll(“。content ul li”);
(3)如果想要获得所有类为w3c的li元素,我们只需要:
文件。getElementsByClassName(“w3c”);