第87天:HTML5中新选择器querySelector的使用

一、HTML5新选择器

1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null; 支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+ 2、document.querySelectorAll("selector"); selector:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组; 支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

3、document.getElementsByClassName("selector"); selector:根据类选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组; 支持: Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+

4、注意:

  • document.querySelector(selector);//返回第一个满足选择器条件的元素,一个DOM对象
  • document.querySelectorAll(selector);//返回所有满足该条件的元素,元素类型是dom的数组
  • $('.item');//返回一个jQuery对象(dom元素的数组)
  • 本质上jQuery方式和querySelector方式都是获取DOM数组,只不过jquery会多一些其他成员
  • DOM数组的每一个成员注册事件不能像jquery一样直接注册,必须分别给每个元素注册
  • html5就是将经常需要的操作又包装一层

实例:

 1 <div class="content">  
 2 <ul>    
 3 <li>实例</li>
 4     
 5 <li class="exp">实例</li>
 6     
 7 <li class="exp">实例</li>
 8     
 9 <li class="exp">实例</li>
10     
11 <li>实例</li>
12 
13   </ul>
14 
15 </div>

 (1)如果想要获得第一个li元素,我们只需要:   document.querySelector(".content ul li"); (2)如果想要获得所有li元素,我们只需要:   document.querySelectorAll(".content ul li"); (3)如果想要获得所有class为w3c的li元素,我们只需要:   document.getElementsByClassName("w3c");

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【Golang语言基础】Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

29980
来自专栏Clive的技术分享

Go中的切片append

14730
来自专栏web前端-

Jquery的属性操作和DOM操作

       3 val()    :     获取或设置表单内容    (原生JS使用value)

10820
来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

369100
来自专栏阮一峰的网络日志

CSS选择器笔记

这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。

12920
来自专栏柠檬先生

jquery 筛选元素 (3)

.addBack()   添加堆栈中元素集合到当前集合中,一个选择性的过滤选择器。   .addBack([selector]) ...

21070
来自专栏深度学习之tensorflow实战篇

go println与printf区别

Println 与Printf 都是fmt 包中的公共方法 Println :可以打印出字符串,和变量; Printf : 只可以打印出格式化的字符串,可以输出...

29140
来自专栏Golang语言社区

【Golang语言社区--基础篇】Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

386110
来自专栏闻道于事

JavaWeb(八)JQuery

jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系...

29540
来自专栏gaoqin31

jQuery源码浅析

如果说php是世界上最好的语言,那么javascript无疑可以称为世界上最飘逸的语言,最近看了下jQuery的源码,实现了一个简陋的jQuery。我觉得要看懂...

23930

扫码关注云+社区

领取腾讯云代金券