<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用HTML5的JavaScript选择器操作页面中的元素</title>
</head>
<body>
    <div>
        <!--信息输入标签-->
        <h2>兴趣和爱好:<label></label></h2>
        <!--复选框列表-->
        <input type="checkbox" id="c1"><label for="c1">篮球</label>
        <input type="checkbox" id="c2"><label for="c2">唱歌</label>
        <input type="checkbox" id="c3"><label for="c3">游泳</label>
        <input type="checkbox" id="c4"><label for="c4">桌球</label>
        <br><br>
        <button>获取兴趣爱好</button>
    </div>
    <script type="text/javascript">
        //监听获取按钮的点击事件(元素选择器)
       document.querySelector('button').addEventListener('click',function(e){
           //按钮默认事件
           e.preventDefault();
           //获取所有选中的复选框(伪类选择器)
           var checked=document.querySelectorAll('input:checked'),
           results=[];//结果数组
           //将元素列表转化为数组
           checked=Array.prototype.slice.call(checked);
           //循环数组,获取选中的值
           checked.forEach(function(item){
               var id=item.getAttribute('id'),//获取复选框id
               //(属性选择器)
               label=document.querySelector('label[for="'+id+'"]');//根据id获取对应label元素
               results.push(label.innerHTML);//将数值推入数组
           });
               //(子元素选择器)
               document.querySelector('h2>label').innerHTML=results.join(',');//设置显示标签内容
       });
    </script>
</body>
</html>

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

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

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  2. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

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

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

  5. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

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

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

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

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

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

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

  9. HTML5的JavaScript选择器介绍

    在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...

随机推荐

  1. (四)、python 集合与格式化

    一.set 集合 集合:可以包含多个元素,用逗号分割“,”   集合的作用:去重,关系运算, 1.不同元素组成2.无序3.集合中元素必须是不可变类型(可hash,可作为字典的key) 使用方法: 1) ...

  2. TCP/IP协议模型详解

    TCP

  3. python的列表数据类型及常用操作

    列表是最常用的Python数据类型,它可以作为一个方括号内的逗号分隔值出现. 列表中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 列表可以进行的操作包括索 ...

  4. java服务端项目开发规范

    更新内容 2015-03-13 (请先更新svn的mybatis.xml.BaseMapper.java.Pager.java文件) 加入测试类规范 加入事物控制规范 加入mapper接口规则 ...

  5. 第三章 最简单的C程序设计——顺序程序设计

    一.数据的表现形式及其运算 1.常量和变量 在计算机高级语言中,数据有两种表现形式:常量和变量. 1.1.常量 在程序运行过程中,其值不能被改变的量称为常量.如:5,6,32,0.111. 数值常量就 ...

  6. c++ map的使用方法

    1.头文件:#include<map> 2.定义:map<typename1,typename2> mp 注:字符串数组只能用string而不能使用char[] 3.访问方式: ...

  7. DAG上dp思想

    DAG上DP的思想 在下最近刷了几道DAG图上dp的题目.要提到的第一道是NOIP原题<最优贸易>.这是一个缩点后带点权的DAG上dp,它同时规定了起点和终点.第二道是洛谷上的NOI导刊题 ...

  8. c/c++ 随机数生成

    当程序需要一个随机数时有两种情况下使用: 1.程序中只需使用一次随机数,则调用rand()函数即可 2.程序需要多次使用随机数,那么需要使用srand()函数生成随机数种子在调用rand()函数保证每 ...

  9. jmeter插件之jsonpath提取响应结果和做断言

    准备工作: 1. jmeter3.X已经自带了提取响应结果的插件:JSON Extractor 2. 下载断言插件:https://jmeter-plugins.org/wiki/JSONPathAs ...

  10. Android中StackOverflow的问题

    最近出现了一个让人抓狂的问题. 现在的项目中,制作了一个界面非常复杂.Fragment中嵌套下拉刷新的Listview 这样一个布局,在3.0以上的手机上都表现良好问题!但是在2.x的比较弱爆的手机上 ...