HTML5--JS API-新的選擇器


新的選擇器
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");


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM