欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-31 09:09:23
文件命名为:querySelector.html,可在Chrome浏览器中预览效果。      1 ...
文件命名为: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     <p>

 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     </p>

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行分别使用了元素选择器、伪类选择器、属性选择器和子元素选择器。