专栏首页互联网杂技HTML5中类jQuery选择器querySelector的使用

HTML5中类jQuery选择器querySelector的使用

简介

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。

用法

两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。

element = document.querySelector('selectors');elementList = document.querySelectorAll('selectors');

其中参数selectors 可以包含多个CSS选择器,用逗号隔开。

element = document.querySelector('selector1,selector2,...');elementList = document.querySelectorAll('selector1,selector2,...');

使用这两个方法无法查找带伪类状态的元素,比如querySelector(':hover')不会得到预期结果。

querySelector

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

element = document.querySelector('div#container');//返回id为container的首个divelement = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素

querySelectorAll

该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。

elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div

但需要注意的是返回的nodeList集合中的元素是非实时(no-live)的,想要区别什么是实时非实时的返回结果,请看下例:

<div id="container">
    <div></div>
    <div></div></div>
//首先选取页面中id为container的元素container=document.getElementById('#container');console.log(container.childNodes.length)//结果为2//然后通过代码为其添加一个子元素container.appendChild(document.createElement('div'));//这个元素不但添加到页面了,这里的变量container也自动更新了console.log(container.childNodes.length)//结果为3

通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。

关于转义

我们知道反斜杠是用来转义用的,比如在字符串里我们想表示空字符就使用'\b',换行'\n'。同样,在提供给querySelector和querySelectorAll的参数也支持转义,了解这点非常重要。

先看个例子,比如我们有个div它的样式类为'foo:bar',当然我知道你一般不会这样写。当我们需要选择它的时候,就需要将其中的冒号进行转义,否则抛错。

<div class="foo:bar"></div>

浏览器报怨表示不是一个合法的选择语句。

同时,有趣的事情来了,或许你以为将冒号直接转义就解决问题了。

同样,也表示非法。原因就在于反斜杠在字符串中本身就表示转义的意思,它于冒号结合转不出东西来,于是抛错。

所以正确的做法是将反斜杠转义后'.foo\\:bar'再传递给querySelector,后者在接收到'.foo\\:bar'这个参数后,字符串将两个反斜杠转义成一个,然后querySelector前面得到的一个反斜杠与冒号结合进行转义得到正确结果。

也就是说经历两次转义,一次是字符串当中,一次是querySelector解析参数时。

理解这点后,可以来看一个更有趣的例子了。比如我们要选择类名里面含反斜杠的元素。是的,我们需要一共使用四个反斜杠!才能正常工作。

<div class="foo\bar"></div>

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-09

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 提升 Node.js 应用性能的 5 个技巧

    “如果nginx没有在你的节点服务器之前,那么你可能就错了。”Bryan Hughes在Twitter上说 Node.js是全球领先的用JavaScript——...

    李海彬
  • 从websocket看go的应用

    Go是互联网时代的通用编程语言。这样它就和命令行时代的C语言、图示界面时代的C++、以及互联网早期的Java语言等有不同的侧重。它强调保持自身的精巧和独立,从而...

    李海彬
  • Java之线程———GUI线程(包含打字游戏和计时器俩个GUI实列)

         当java程序包含图形用户界面(GUI)时,Java虚拟机在运行应用程序时会自动启动更多的线程,其中有两个重要的线程:AWT-EventQuecue ...

    Gxjun
  • 【Dev Club分享】基于RxJava的一种MVP实现

    Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师。每周都会举行嘉宾分享,话题讨论等活动。 本期,我们邀请了腾...

    腾讯Bugly
  • Node.js新手必须知道的4个JavaScript概念

    如果只需要知道一种编程语言就可以构建一个全栈的应用程序,是不是特别了不起?Ryan Dahl为了把这个想法成为现实,创造了node.js。Node.js是建立在...

    李海彬
  • Android 减包 - 减少APK大小

    本文来自“天天P图攻城狮”公众号(ttpic_dev) 本文是对Google官方文档 Reduce APK Size 的翻译,查看英文原文(需要翻墙) 译者简介...

    腾讯Bugly
  • 教你如何去掉友荐和无觅的隐藏外链和版权链接

    最近,为了做无觅的 APP,装上了无觅的相关推荐,结果果断不给力,打包了 2 个星期还在打包,还能再坑点么? ? 蜗牛般的效率,暂且就不吐槽了。偶尔用站长工具检...

    张戈
  • 离线网页制作器(beta1.0)

    1 package hhuarongdao; 2 /* 3 *使用方法: 先选择保存路径,然后输入相应的网址, 4 *然后会得到那个网页的离...

    Gxjun
  • 问题帖子--Concurrent Read/Write Map

    DK1.5 引入了 concurrent package, 提供了更多的concurrent 控制方法。 还提供了一个 ConcurrentHashMap 类...

    李海彬
  • java设计之简单的JAVA计算器

           做这个东西主要是为了练习一下以前学习过的java Swing,所以那些复杂的算法就没有加载到里面去........        先展示一下效果....

    Gxjun

扫码关注云+社区

领取腾讯云代金券