<!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. checked="checked"无效，radio未选中问题排查

    在使用attr给元素设置属性的时候,但是显示在页面就是未选中,而且是只使用一两次是ok的,但是连着多使用就不起作用了,百度了下,发现遇到这个问题的人还蛮多的, 有人说,发现在jQuery1.6版本之后 ...

  2. MAC和windows开发操作系统环境，解决Maven工程中报 Missing artifact jdk.tools:jdk.tools

    同事使用的是苹果mac,而我们其他人的开发环境是windows jdk1.8 导致同事从git上pull下来的工程,pom文件是直接报错的, windows下的pom文件设置是这样的: <dep ...

  3. flask 中访问时后台错误 error: [Errno 32] Broken pipe

    解决办法:app.run(threaded=True) 个人理解:flask默认单线程,访问一个页面时会访问到很多页面,比如一些图片,加入参数使其为多线程

  4. python学习——函数

     一.在python的世界里什么是函数: 答:函数通常是用来实现某一个功能二被封装成的一个对象,是用来实现代码复用的常用方式 现在有一个需求,假如你在不知道len()方法的情况下,要你计算字符串‘he ...

  5. 原lnmp环境服务器升级为mysql+nginx+php单个docker容器构建的lnmp环境

    时间:2018年2月 一.项目背景 我单位现web服务架构为lnmp环境,服务器软件.硬件升级部署难:同时开源软件日新月异,考虑到技术升级,领导决定服务器架构整体升级为容器架构,维护性.移植性强. 二 ...

  6. Leecode刷题之旅-C语言/python-26.删除数组中的重复项

    /* * @lc app=leetcode.cn id=26 lang=c * * [26] 删除排序数组中的重复项 * * https://leetcode-cn.com/problems/remo ...

  7. ssh安装和使用

    1.基础知识 ssh用于远程登陆,linux默认安装了client,如果需要被登陆则需要安装 server 2.安装 apt-get install openssh-server 检查是否安装成功 a ...

  8. stm32+lwip(二):UDP测试

    我是卓波,很高兴你来看我的博客. 系列文章: stm32+lwip(一):使用STM32CubeMX生成项目 stm32+lwip(二):UDP测试 stm32+lwip(三):TCP测试 stm32 ...

  9. （数据科学学习手札30）朴素贝叶斯分类器的原理详解&Python与R实现

    一.简介 要介绍朴素贝叶斯(naive bayes)分类器,就不得不先介绍贝叶斯决策论的相关理论: 贝叶斯决策论(bayesian decision theory)是概率框架下实施决策的基本方法.对分 ...

  10. ubuntu下安装LAMP环境遇到的一些小问题

    0x00 今天在服务器上重新弄了一下lamp环境 安装的过程中遇到了不少小问题 记录一下解决的方案吧 服务器安装的是ubuntu 16.04.1 0x01 首先在用 apt-get install 安 ...