<!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. JVM——Java内存区域

    一,概述: Java跟C++不同,在内存管理区域C++程序员拥有着最高权力,但是正是因为如此,所以C++程序员要照顾这个对象的生老病死,从创建到消亡都是由程序员决定的. 但是Java程序员在虚拟机的自 ...

  2. 01 shell编程规范与变量

    前言: 大家对shell脚本应该都不算陌生了,如果突然问你什么是shell脚本?是干什么用的?由什么组成以及怎么使用?变量的概念是什么?作用范围是什么?变量间的算术运算怎么表示?你能很容易答出来吗 本 ...

  3. CVE-2017-11882复现-office命令执行

    0x01 前言 11月14日,微软按照惯例发布了11月的安全更新,随后不久,安全公司EMBEDI在官方博客上公开了其向微软提交的编号为CVE-2017-11882的Office远程代码执行漏洞: ht ...

  4. A*与IDA*的奇妙之旅

    因为A*卡了一天QAQ 那么,A*是什么呢? A* A*是对于bfs的优化,启发式搜索. 例如下图: 不错,在这张图上,小人去找电脑,用bfs的话: 黄色就是bfs的搜索范围...不要问我为什么选黄色 ...

  5. dijkstra算法学习

    dijkstra算法学习 一.最短路径 单源最短路径:计算源点到其他各顶点的最短路径的长度 全局最短路径:图中任意两点的最短路径 Dijkstra.Bellman-Ford.SPFA求单源最短路径 F ...

  6. python中矢量化字符串方法

  7. java使用urlConnection抓取部分数据乱码

    使用urlconnection做抓取的同学应该一开始都是使用这个吧.OK回到正题来..... 在内容己有中文.英文己正常显示,仍然会有部分中文或英文出现乱码,这是为什么呢?这个问题一直在心里盘旋... ...

  8. （转） Sqoop使用实例讲解

    原博客地址:http://blog.csdn.net/evankaka 摘要:本文主要讲了笔者在使用sqoop过程中的一些实例 一.概述与基本原理 Apache Sqoop(SQL-to-Hadoop ...

  9. 源码解析：解析掌阅X2C 框架

    前言 掌阅出品了X2C 框架,听说可以加快性能.喜欢研究源码的我,肯定要来看下是怎么回事. 作为一个开发,应该不屑于只会使用开源框架. OK,来尝试下. 项目地址: https://github.co ...

  10. leetcode笔记--6 Add Digits

    question: Given a non-negative integer num, repeatedly add all its digits until the result has only ...