使用HTML5的JS选择器操作页面中的元素

浏览数：27 / 时间：2015年06月09日

上一篇文章介绍了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>