首页
登录 | 注册

 querySelectorAll()方法接收的参数也是CSS选择符

  之前,我们介绍了HTML5中的选择器querySelector(1)。今天,我们继续为大家分享HTML5中新添加的选择器querySelectorAll(2)。

  之前,我们介绍了HTML5中的选择器querySelector(1)。今天,我们继续为大家分享HTML5中新添加的选择器querySelectorAll(2)。

  querySelectorAll()方法接收的参数也是CSS选择符,但是返回的是所有匹配元素,而querySelector()方法返回的是第一个匹配的元素。

  querySelectorAll()方法返回的是一个NodeList的实例。NodeList是带有所有属性和方法的实例。其底层实现相当于一组元素的快照,并不是文档进行搜索的动态查询。这样可以避免使用NodeList对象通常会引起的性能问题。

  只要给querySelectorAll()方法中传的参数是有效的,这个方法不管找到的元素有多少个都会返回一个NodeList对象。如果没有找到匹配的元素,NodeList就会是空的。下面看一个小例子更好的为大家说明。

  HTML代码


  梦龙小站


  梦龙小站


  梦龙小站


  梦龙小站



推荐阅读    http://www.shenzaixian.com  http://www.jiuyituan.com http://sz.shenzaixian.com

  JavaScript代码

  //获取类名为all的

中所有的元素,类似于getElementsByTagName("i")

  var i = document.getElementById("all").querySelectorAll("i");

  //获取类名为span的所有元素

  var span = document.querySelectorAll(".sppan");

  //获取所有

标签中的所有元素

  var em = document.querySelectorAll("p em");

  要获取返回的NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法,小例子如下。

  HTML代码


  梦龙小站


  梦龙小站


  梦龙小站


  梦龙小站



  JavaScript代码

  //获取所有

标签中的所有元素

  var em = document.querySelectorAll("p em");

  var i, len, emOne;

  for(i=0, len = em.length; i

  emOne = em[i];

  //或者 em.item(i);

  emOne.className = "meng";

  }

  如果在querySelectorAll()方法的参数中传入了浏览器不支持的选择符或者选择符中存在语法错误,那么querySelectorAll()方法会报出错误。

  HTML5实战与剖析之CSS选择器——querySelectorAll()就为大家介绍到这里,querySelectorAll()方法仅仅是HTML5中的小小部分。在学习HTML5的道路上,我们消化每个小小的知识,一步一个脚印走向终点。

  实战

  除非特别声明,PHP100新闻均为原创或投稿报道,转载请注明作者及原文链接

  原文地址: http://www.php100.com/html/program/html5/2014/0326/6693.html


相关文章

  • Dustin Marx是一位专业软件开发者,从业已经有17年的时间,他拥有电子工程学士学位,还是一位MBA.Dustin维护着一个博客,专门介绍软件开发的各个主题.近日,他撰文谈到了Java开发中常见的危险信号,提出了在日常的Java开发中 ...
  • 分享个JAVA学习路线[新手可以参考看下]觉得不好的,大家可以提出来我补充. 第一阶段 技术名称 技术内容 J2SE (java基础部分) java开发前奏 计算机基本原理,Java语言发展简史以及开发环境的搭建,体验Java程序的开发,环 ...
  • Java基础8:深入理解内部类
    这是一位阿里 Java 工程师的技术小站,作者黄小斜,专注 Java 相关技术:SSM.SpringBoot.MySQL.分布式.中间件.集群.Linux.网络.多线程,偶尔讲点Docker.ELK,同时也分享技术干货和学习经验,致力于Ja ...
  • 现象: linux下C++开发的网络服务器程序,在页面刷新时有时候会出现进程退出的情况.使用gdb调试,发现是系统发送了SIGPIPE信号,导致进程退出的. 规避或解决方法: 最根本的解决办法是提高socket编程recv或send函数的健 ...
  • css 样式大全 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) ...
  • 对于PHP程序设计语言来说.每个人的学习方式不同,写这篇文章的目的是分享一下自己的学习过程,仅供参考,不要一味的用别人的学习方法,找对自己有用的 学习方式.经常在某些论坛和QQ群里看到一些朋友会问"怎样才能学好PHP,怎样才能学好 ...

2020 unjeep.com webmaster#unjeep.com
12 q. 0.013 s.
京ICP备10005923号