一、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. 《Java程序设计》课堂实践内容总结

    <Java程序设计>课堂实践内容总结 实践一 要求 修改教材P98 Score2.java, 让执行结果数组填充是自己的学号: 提交在IDEA或命令行中运行结查截图,加上学号水印,没学号的 ...

  2. 莫队算法&BZOJ2038

    题目传送门 今天看了分块,顺便把基本的莫队学习了一下. 莫队算法是一种离线算法,复杂度可以达到O((M+N)*Sqrt(N)); 对于询问区间的左端点分块,块内的右端点从小到大排列. 对区间进行偏移操 ...

  3. 对PostgreSQL数据库的hstore类型建立GisT索引的实验

    磨砺技术珠矶,践行数据之道,追求卓越价值回到上一级页面:PostgreSQL基础知识与基本操作索引页    回到顶级页面:PostgreSQL索引页[作者 高健@博客园  luckyjackgao@g ...

  4. CF833D Red-Black Cobweb

    题面 题解 点分治大火题... 设白边数量为$a$,黑边为$b$,则$2min(a,b)\geq max(a,b)$ 即$2a\geq b\;\&\&2b\geq a$ 考虑点分治时如 ...

  5. Drupal7 针对特定条件才显示区块

    当D7中开启PHP filter模块. Text format就会多出“PHP Code”选项. 而且,新建block时也会多出"Pages on which PHP code return ...

  6. Error running 'Tomcat 7': Unable to open debugger port (127.0.0.1:9342)

    这个只需要把java虚拟机进程结束掉就行了

  7. linux挂在samba服务器到本地(用于备份文件到nas或者windows的文件服务器)

    1.安装工具 首先在linux上安装samba访问工具 sudo apt-get install smbclient sudo apt-get install cifs-utils 2.查看服务器目录 ...

  8. 我们一起学习WCF 第三篇头消息验证用户身份

    前言:今天我主要写的是关于头消息的一个用处验证用户信息 下面我画一个图,可以先看图 第一步:我们先开始做用户请求代码 首先:创建一个可执行的上下文对象块并定义内部传输的通道 using (Operat ...

  9. Spring学习(九)-----Spring bean配置继承

    在 Spring,继承是用为支持bean设置一个 bean 来分享共同的值,属性或配置. 一个子 bean 或继承的bean可以继承其父 bean 的配置,属性和一些属性.另外,子 Bean 允许覆盖 ...

  10. json_encode替代函数

    <?php   function jsonEncode($var) {     if (function_exists('json_encode')) {         return json ...