第87天：HTML5中新選擇器querySelector的使用

一、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就是將經常需要的操作又包裝一層

例項：

 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”);