上一篇文章介紹了HTML5新增的JavaScript選擇器，今晚正式實踐一下，使用HTML5的JS選擇器操作頁面中的元素。
文件命名為：querySelector.html，可在Chrome瀏覽器中預覽效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS選擇器操作頁面中的元素</title> 6 </head> 7 <body> 8 <div> 9 <!--信息輸入標簽--> 10 <h2>興趣愛好：<label></label></h2> 11 <!--復選框列表--> 12 <input type="checkbox" id="c1"><label for="c1">籃球</label> 13 <input type="checkbox" id="c2"><label for="c2">唱歌</label> 14 <input type="checkbox" id="c3"><label for="c3">游泳</label> 15 <input type="checkbox" id="c4"><label for="c4">桌球</label> 16 <br><br> 17 <button>獲取興趣愛好</button> 18 </div> 19 20 <script> 21 //監聽獲取按鈕的點擊事件 22 document.querySelector('button').addEventListener('click',function(e){ 23 //按鈕默認事件 24 e.preventDefault(); 25 //獲取所有選中的復選框 26 var checked = document.querySelectorAll('input:checked'), 27 results = [];//結果數組 28 //將元素列表轉化為數組 29 checked = Array.prototype.slice.call(checked); 30 //循環數組，獲取選中的值 31 checked.forEach(function(item){ 32 var id = item.getAttribute('id'), //獲取復選框id 33 label = document.querySelector('label[for="'+ id +'"]'); //根據id獲取對應label元素 34 results.push(label.innerHTML); //將數值推入數組 35 }); 36 document.querySelector('h2 > label').innerHTML = results.join(',');//設置顯示標簽內容 37 }); 38 </script> 39 </body> 40 </html>
示例中，第22、26、33、36行分別使用了元素選擇器、偽類選擇器、屬性選擇器和子元素選擇器。
querySelector.html的文件效果如下：
選中數據並點擊“獲取興趣愛好”按鈕的效果如下：
