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

叁歲伎倆 2022-10-06 04:44 155阅读 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 条评论，155人围观）

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

相关阅读

相关 HTML中CSS选择器的使用

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

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

相关复合选择器-后代选择器（HTML、CSS）

复合选择器-后代选择器（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

左手的ㄟ右手/ 2023年10月03日 12:49/ 0 赞/ 22 阅读

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

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

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

相关 js选择器

最近弄得项目里面要求各标签不能用id，只能用class，在js选择器中选择class时，用getElementByCLassName又不行（具体原因我也不知道为什么），后面查到

刺骨的言语ヽ痛彻心扉/ 2022年08月13日 01:58/ 0 赞/ 207 阅读

相关 html选择器

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

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

相关 HTML中基本选择器

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

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

相关 HTML5新增的选择器

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

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

相关 HTML5+CSS3选择器

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

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

相关 js选择器

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

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

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

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

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