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的首个div element = 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>
浏览器兼容性
目前各主流浏览器对此API提供了良好支持,IE需8+。详情见caniuse。
4.0+ |
3.5+ |
8+ |
10.0+ |
3.1+ |
REFERENCE
本文主要参考了MDN上的文档
- document.querySelectorAll
- document.querySelector
- NodeList
转载于:https://www.cnblogs.com/Wayou/p/html5_web_api_queryselector.html
HTML5中类jQuery选择器querySelector的使用相关推荐
- 使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
- JavaScript强化教程——jQuery选择器
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所 ...
- html5 js选择器,使用HTML5的JS选择器操作页面中的元素
文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 2 3 4 5 使用HTML5的JS选择器操作页面中的元素 6 7 8 9 10 兴趣爱好: 11 12 ...
- jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- jquery选择器连续选择_JQuery中的选择器
jquery选择器连续选择 It's time to write some JQuery now. Do check out the introductory article on JQuery fi ...
- jQuery(一)—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
- 【08】jQuery:01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
这是一个用HTML5和jQuery插件结合使用生成的图形特效,是基于星际争霸2的图片资源的. 在线演示 演示demo下载 HTML代码 <header><h1>Starcraf ...
- jQuery选择器和JS选择器
jQuery选择器: jQuery选择器的写法和CSS选择器的写法非常相似,在学习之前了解下CSS选择器,对掌握jQuery选择器是非常有帮助的 (一) 基本选择器:主要包含id选择器.class选择 ...
最新文章
- 轻松优化Jupyter Notebook:技巧、诀窍、魔法
- 如何将自己的站点与Ucenter整合——详解
- 不会玩电脑怎么学计算机,不会玩电脑怎么学
- 【编译原理】文法分类
- 实体类的动态生成(二)
- CSS之中间固定两边自适应宽度
- mysql mvcc 隔离级别_关于 Mysql 四种隔离级别中 Lock 和 MVCC 的关系
- MIP 技术进展月报:储存功能全新上线,MIP-Cache域名升级,校验更严谨
- 腾讯视频下载安装免费2020_腾讯视频app的哪里发贴
- 计算机组成材质,计算机组成原理及应用期末复习材料
- spring的jdbcTemplate的多数据源的配置,springboot的jdbcTemplate的多数据源的配置
- 面向对象设计思想_重要_2
- 网络间谍在2017年被列为全球企业最为严重的威胁
- TCP/IP参考模型入门
- 1040 Longest Symmetric String (25 分)
- URI和URL的区别比较与理解
- SpringCloud之服务网关(总体第五篇)
- 彻底关闭windows安全中心
- maven 解决Cannot access alimaven以及Process terminated
- 计算机视觉论文-2021-07-19