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

實例：

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