第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就是将经常需要的操作又包装一层
实例:
<div class="content">
<ul>
<li>实例</li>
<li class="exp">实例</li>
<li class="exp">实例</li>
<li class="exp">实例</li>
<li>实例</li> </ul> </div>
(1)如果想要获得第一个li元素,我们只需要:
document.querySelector(".content ul li");
(2)如果想要获得所有li元素,我们只需要:
document.querySelectorAll(".content ul li");
(3)如果想要获得所有class为w3c的li元素,我们只需要:
document.getElementsByClassName("w3c");
第87天:HTML5中新选择器querySelector的使用的更多相关文章
- HTML5中新添加事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- HTML5中新的结构元素
HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...
- HTML5中class选择器属性的解释
设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...
- html5中的选择器
1.html5中的属性选择器 <body> <style type=text/css> <!--1>完全匹配选择器--> [id=test]{ color:r ...
- HTML5中新增加的结构元素、网页元素和全局属性
HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...
- html5 新选择器 querySelector querySelectorAll
querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...
- HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...
- HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);
基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...
- html5中新的标准属性
属性 值 描述accesskey ...
随机推荐
- 20155232 实验四 Android程序设计
20155232 实验四 Android程序设计 一.实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3.掌握 ...
- 20155301 Makefile和MyOD和共享库
20155301 Makefile和MyOD和共享库 Makefile 作用:make命令执行时,需要一个 Makefile 文件,以告诉make命令需要怎么样的去编译和链接程序. 我们要写一个Mak ...
- 20155338 2016-2017-2 《Java程序设计》第4周学习总结
20155338 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 内容有很多,这里这是选取几个比较重要的一部分来展示. 1.继承 •定义:继承基本上就是避免多 ...
- addClass+siblings+removeClass用意:
$(this).addClass("li_add").siblings().removeClass("li_add").children('.floor2'). ...
- EXCEL 处理重复数据名字后面追加值
近期要用 EXCEL 处理重复数据名字后面追加值的,如图: 先排序,再根据条件追加 [公式]=+B6&IF(COUNTIF($B$6:B6,B6)-1>0,"_" & ...
- sql语句-3-聚合数据查询
- 【LG3237】[HNOI2014]米特运输
题面 洛谷 题解 代码 #include <iostream> #include <cstdio> #include <cstdlib> #include < ...
- python爬虫-爬取盗墓笔记
本来今天要继续更新 scrapy爬取美女图片 系列文章,可是发现使用免费的代理ip都非常不稳定,有时候连接上,有时候连接不上,所以我想找到稳定的代理ip,下次再更新 scrapy爬取美女图片之应对反 ...
- Windows下MongoDB优化及问题处理
1.MongoDB 服务器CPU占用100% 给Mongodb对应数据库中的表建立索引,这里我采用使用工具:NoSQL Manager for MongoDB 直接在表的属性栏,选择Indexes,右 ...
- 2.5星|《哈佛商学院管理与MBA案例全书》:书名太唬人了,依据中文经管书汇编整理而成
哈佛商学院管理与MBA案例全书(套装十册) 看到最后,列出的参考书目中全部是中文经管书,才明白这本书不是哈佛商学院出版的,是国内的编辑做的汇编.参考书目中除了中文经管书之外,还有一套<哈佛商学院 ...