一、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的使用的更多相关文章

  1. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  2. HTML5中新的结构元素

    HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: "http://www.w3. org/TR/html4/strict.d ...

  3. HTML5中class选择器属性的解释

    设置有class属性值的元素,可以被css中的选择器调用,也可以在javascript中以getElementsByClassName()方法调用. 可以给各个元素添加class而且名称可以相同与id ...

  4. html5中的选择器

    1.html5中的属性选择器 <body> <style type=text/css> <!--1>完全匹配选择器--> [id=test]{ color:r ...

  5. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  6. html5 新选择器 querySelector querySelectorAll

    querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...

  7. HTML5中类jQuery选择器querySelector的使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...

  8. HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);

    基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...

  9. html5中新的标准属性

    属性                                        值                                  描述accesskey             ...

随机推荐

  1. 20155232 实验四 Android程序设计

    20155232 实验四 Android程序设计 一.实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3.掌握 ...

  2. 20155301 Makefile和MyOD和共享库

    20155301 Makefile和MyOD和共享库 Makefile 作用:make命令执行时,需要一个 Makefile 文件,以告诉make命令需要怎么样的去编译和链接程序. 我们要写一个Mak ...

  3. 20155338 2016-2017-2 《Java程序设计》第4周学习总结

    20155338 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 内容有很多,这里这是选取几个比较重要的一部分来展示. 1.继承 •定义:继承基本上就是避免多 ...

  4. addClass+siblings+removeClass用意:

    $(this).addClass("li_add").siblings().removeClass("li_add").children('.floor2'). ...

  5. EXCEL 处理重复数据名字后面追加值

    近期要用 EXCEL 处理重复数据名字后面追加值的,如图: 先排序,再根据条件追加 [公式]=+B6&IF(COUNTIF($B$6:B6,B6)-1>0,"_" & ...

  6. sql语句-3-聚合数据查询

  7. 【LG3237】[HNOI2014]米特运输

    题面 洛谷 题解 代码 #include <iostream> #include <cstdio> #include <cstdlib> #include < ...

  8. python爬虫-爬取盗墓笔记

    本来今天要继续更新 scrapy爬取美女图片 系列文章,可是发现使用免费的代理ip都非常不稳定,有时候连接上,有时候连接不上,所以我想找到稳定的代理ip,下次再更新  scrapy爬取美女图片之应对反 ...

  9. Windows下MongoDB优化及问题处理

    1.MongoDB 服务器CPU占用100% 给Mongodb对应数据库中的表建立索引,这里我采用使用工具:NoSQL Manager for MongoDB 直接在表的属性栏,选择Indexes,右 ...

  10. 2.5星|《哈佛商学院管理与MBA案例全书》:书名太唬人了,依据中文经管书汇编整理而成

    哈佛商学院管理与MBA案例全书(套装十册) 看到最后,列出的参考书目中全部是中文经管书,才明白这本书不是哈佛商学院出版的,是国内的编辑做的汇编.参考书目中除了中文经管书之外,还有一套<哈佛商学院 ...