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

叁歲伎倆 2022-10-06 04:44 162阅读 0赞

文件命名为：querySelector.html，可在Chrome浏览器中预览效果。

1

2

3

4

5

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

6

7

8

9

10

## 兴趣爱好： ##

11

12         篮球

13         唱歌

14         游泳

15         桌球

16

17         获取兴趣爱好

18

19

20

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

39

40

示例中，第22、26、33、36行分别使用了元素选择器、伪类选择器、属性选择器和子元素选择器。

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML中CSS选择器的使用

一、元素[选择器][Link 1] 1、书写格式：标记名\{/\生命块\/\} 2、所有与该标记匹配的元素，都将应用声明块中的规则二、类选择器 1、书写格式：.类名\

你的名字/ 2024年04月03日 13:10/ 0 赞/ 83 阅读

相关 JavaScript选择器：使用选择器选取和操作HTML元素

JavaScript是一种广泛使用的脚本语言，它可以与HTML文档交互，实现动态和交互式的网页功能。在JavaScript中，选择器是一种强大的工具，它允许我们通过指定特定的选

以你之姓@/ 2023年10月16日 14:03/ 0 赞/ 11 阅读

相关 html5 js选择器,使用HTML5的JS选择器操作页面中的元素

文件命名为：querySelector.html，可在Chrome浏览器中预览效果。 1 2 3 4 5 使用HTML5的JS选择器操作页面中的元素

叁歲伎倆/ 2022年10月06日 04:44/ 0 赞/ 163 阅读

相关选择时间表单html,{HTML5}表单选择器-第一节

表单作为 HTML 中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用 jQuery 为表单专门提供的选择器和过滤器来准确的

骑猪看日落/ 2022年10月06日 03:55/ 0 赞/ 31 阅读

相关 html选择器

标签选择器：直接使用html标签当作css选择器的，就是标签选择器。所有该标签都被选择器选中。例如： p\{color: red;\} 类选择器：使用

红太狼/ 2022年06月15日 03:08/ 0 赞/ 296 阅读

相关 HTML中基本选择器

三大基本选择器 1、标签选择器：使用标签名称作为选择器选中标签设置样式。特点：可以选中多个标签，给一堆标签同时设置样式 2、类型选择器：在标签中利用class

心已赠人/ 2022年05月23日 04:58/ 0 赞/ 155 阅读

相关 HTML5新增的选择器

除了传统的document.getElementById,document.getElementsByName,document.getElementsByTagName外，H

矫情吗；*/ 2022年04月14日 06:08/ 0 赞/ 202 阅读

相关 HTML5+CSS3选择器

一、HTML5的认识 HTML5相较于HTML4进行了升级，比HTML4语义化更明确，新增了一些标签，同时也废除了一些元素旧的标签。 1.HTML5新增的语义化结构元

电玩女神/ 2022年04月11日 12:17/ 0 赞/ 284 阅读

相关 js选择器

转自：[https://blog.csdn.net/Interseting/article/details/78162071][https_blog.csdn.net_Inte

刺骨的言语ヽ痛彻心扉/ 2022年01月21日 04:39/ 0 赞/ 270 阅读

相关 HTML5标签和CSS选择器汇总

HTML5标签和CSS选择器汇总在设计html文档结构是我们不应该仅使用某一种标签，例如什么地方都用div，这样既使html结构混乱有十分让人难看懂理解。html5以来

女爷i/ 2021年09月20日 15:28/ 0 赞/ 337 阅读