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

使用HTML5的JS选择器操作页面中的元素的更多相关文章

  1. 使用HTML5的JavaScript选择器操作页面中的元素

    <!doctype html><html lang="en"> <head>     <meta charset="UTF-8& ...

  2. js Dom为页面中的元素绑定键盘或鼠标事件

    html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...

  3. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  4. 如何使用Web3.js API 在页面中进行转账

    本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...

  5. 控制使用jquery load()方法载入新页面中的元素

    最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...

  6. Js脚本选取iframe中的元素

    遇到个小问题,需要用到原生Js处理页面中的元素,以往一个document.getElementById就完活的选取元素,这次却不好使了.. 仔细看代码发现要选取元素外面多了一个iframe标签 < ...

  7. 使用jquery操作iframe中的元素

    使用jquery操作iframe中的元素<iframe src="/test/demo.htm" width="99%" height="300 ...

  8. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  9. 在浏览器中使用jquery取得iframe中页面中指定元素的值的不同

    自己使用aspx页面中嵌套了ascx的页面其中使用了iframe的一些内容,出现了同一个页面的两种取值的方式 1. 在iframe的包含页面,需要使用iframe的页面中的元素,是需要使用$(wind ...

随机推荐

  1. linux环境下，利用tc限制两台服务器间的网速，非常简单。

    最近再搞postgres的数据同步,需要模拟异地机房有带宽限制时的同步效果,所以想要限制一下两台机器之间的网速. ts命令功能很强,同时也好难理解和使用,经常浪费了好半天还是搞不定. 这里分享一个简单 ...

  2. Windows Services Windows Services的操作

    Windows Services的操作 一.服务的创建: 1.新建项目——Windows服务 2.这是每个人都会犯的错误,新建一个项目后,都会按F5(运行),就会出现如下错误: 3.安装服务有很多种方 ...

  3. Flex通过Blazeds利用Remoteservice与后台java消息推送

    http://www.cnblogs.com/xia520pi/archive/2012/05/26/2519343.html http://computerdragon.blog.51cto.com ...

  4. 数组工具类 - ArrayUtil.java

    数组工具类,提供数组.对象之间转换的方法. 源码如下:(点击下载 - ArrayUtil.java .commons-lang-2.6.jar) import java.lang.reflect.Ar ...

  5. Myeclipse的web项目移植到Eclipse中需要添加的包

    3.jstl.jar 4.standard-1.1.2.jar 把Myeclipse的web项目一直到Eclipse当中需要添加的包主要有一下4个: 1.servlet-api.jar 2.jsp-a ...

  6. [CF660C]Hard Process(尺取法)

    题目链接:http://codeforces.com/problemset/problem/660/C 尺取法,每次遇到0的时候补一个1,直到补完或者越界为止.之后每次从左向右回收一个0点.记录路径用 ...

  7. excel表格公式出现#REF是什么意思

    #REF!错误是当单元格引用无效时,显示#REF错误 在出现下列情况时,发生此错误: (1)删除了公式引用的单元格.如A2中＝A1-1,若A1被删除了,则显示此错误: (2)当被剪切的一个范围粘贴到一 ...

  8. mysql JDBC URL格式各个参数详解

    mysql JDBC URL格式如下: jdbc:mysql://[host:port],[host:port].../[database][?参数名1][=参数值1][&参数名2][=参数值 ...

  9. Jqgrid入门-Jqgrid格式化数据(九)

    上一章已经说明了在Jqgrid中如何对数据分组,这一章主要探讨如何格式化Jqgrid中的数据.何谓格式化呢?举个例子,比如对时间格式化处理,去掉后面的时分秒:对数字进行处理,加上千分位分隔符,小数的保 ...

  10. 自己实现内存操作函数memset(),memcmp(),memcpy(),memmove()

    1.memset()内存设置函数(初始化) void *my_memset(void* dest, int c, size_t count) { assert(dest != NULL); char  ...