强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。事实上,现在所有的浏览器厂商都提供了 querySelector
和 querySelectorAll
这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,querySelector 和 querySelectorAll 作为查找 DOM 的又一途径,极大地方便了开发者,使用它们,你可以像使用 CSS 选择器一样快速地查找到你需要的节点。
querySelector
querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样:
document.getElementById("test");
- 1
现在我们来试试使用新方法来获取这个 DIV:
document.querySelector("#test");
document.querySelectorAll("#test")[0];
- 1
- 2
获取文档中 class=”example” 的第一个 <p>
元素:
document.querySelector("p.example");
- 1
获取文档中有 “target” 属性的第一个 <a>
元素:
document.querySelector("a[target]");
- 1
假定你选择了两个选择器: <h2>
和 <h3>
元素。
以下代码将为文档的第一个 <h2>
元素添加背景颜色:
<h2>A h2 element</h2>
<h3>A h3 element</h3>document.querySelector("h2, h3").style.backgroundColor = "red";//返回h2或者h3的首个元素
- 1
- 2
- 3
- 4
但是,如果文档中 <h3>
元素位于 <h2>
元素之前,<h3>
元素将会被设置指定的背景颜色。
<h3>A h3 element</h3>
<h2>A h2 element</h2>document.querySelector("h2, h3").style.backgroundColor = "red";
- 1
- 2
- 3
- 4
使用这两个方法无法查找带伪类状态的元素,比如querySelector(':hover')
不会得到预期结果。
querySelectorAll
该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。
elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div
- 1
但需要注意的是返回的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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById
返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。
感觉区别不大是吧,但如果是稍微复杂点的情况,原始的方法将变得非常麻烦,这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子,我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素,当然这很拗口,但是用本文的新方法来选择这个元素,比用言语来描述它还要简单。
document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];
- 1
- 2
我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。
var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){emphasisText[i].style.fontWeight = "bold";
}
- 1
- 2
- 3
- 4
这是原生方法,比起jquery速度快
关于转义
我们知道反斜杠是用来转义用的,比如在字符串里我们想表示空字符就使用'\b'
,换行'\n'
。同样,在提供给querySelector和querySelectorAll的参数也支持转义,了解这点非常重要。
先看个例子,比如我们有个div它的样式类为'foo:bar'
,当然我知道你一般不会这样写。当我们需要选择它的时候,就需要将其中的冒号进行转义,否则抛错。
<div class="foo:bar"></div>
- 1
浏览器报怨表示不是一个合法的选择语句。
同时,有趣的事情来了,或许你以为将冒号直接转义就解决问题了。
同样,也表示非法。原因就在于反斜杠在字符串中本身就表示转义的意思,它于冒号结合转不出东西来,于是抛错。
所以正确的做法是将反斜杠转义后'.foo\:bar'
再传递给querySelector,后者在接收到'.foo\:bar'
这个参数后,字符串将两个反斜杠转义成一个,然后querySelector前面得到的一个反斜杠与冒号结合进行转义得到正确结果。
也就是说经历两次转义,一次是字符串当中,一次是querySelector解析参数时。
理解这点后,可以来看一个更有趣的例子了。比如我们要选择类名里面含反斜杠的元素。是的,我们需要一共使用四个反斜杠!才能正常工作。
<div class="foo\bar"></div>
- 1
转载自:https://blog.csdn.net/z742182637/article/details/51655690
转载于:https://www.cnblogs.com/wangqilong/p/9417501.html
强大的原生DOM选择器querySelector和querySelectorAll相关推荐
- 原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- 原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- javascript之 原生document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2. ...
- HTML5中类jQuery选择器querySelector的使用
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...
- document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的 新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2. ...
- 强大的独立日期选择器(date picker)插件 - Kalendae
日期:2012-4-16 来源:GBin1.com 在线演示 本地下载 今天分享一个独立的日期选择插件Kalendae,Kalendae是 一个强大健壮的独立日期选择器.如果你不想使用重量的jQu ...
- php 赋值给 dom对象,详解PHP原生DOM对象操作XML的方法
详解PHP原生DOM对象操作XML的方法 发布于 2017-08-08 20:15:29 | 80 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...
- 执行 this.$destroy()后原生DOM事件也无法执行
在跟随尚硅谷 Vue 全家桶学习视频学习销毁组件实例时,视频中执行 this.$destroy() 后虽然组件实例销毁了,但原生 DOM 事件依然能调用,但实际操作发现不仅组件实例销毁,原生 DOM ...
- android时间选择原生,安卓原生时间选择器
调用Android原生日期选择器对话框也就是DatePickerDialog package com.example.myapplication; import android.app.DatePic ...
最新文章
- 常识性概念图谱建设以及在美团场景中的应用
- Google AMP WebPackage 在 Webnovel 的应用
- 某人想在h小时内钓到_为某人命名以重新连接到您的服务器
- earthdata数据的.nc4如何使用
- ASP VBScript 函数速查表
- react中嵌入网页_在网站中添加 React
- centos6.4安装apache php mysql_CentOS 6.4配置Apache+PHP5+MySQL(lamp)环境以及报错处理思路...
- GitHub 日收 7000 星,Windows 计算器项目开源即爆红!
- Windows下Redis的使用
- 并发控制技术手段之多版本(三)
- 【Dart学习】-- Dart之匿名方法闭包
- oracle交叉运算符,Oracle语句优化44个规则详解
- 星际2 BETA客户端背景音乐打包下载(附提取方法)
- 2021 Mac系统升级后,按大小写键没反应了,切换大小写的灯不亮了
- windows10任务栏无响应解决方案
- 【分享】地产集团公司LOGO设计
- 炼数成金数据分析课程---18、降维技术(后面要重点看)
- tushare接口get_realtime_quotes报错:AssertionError: 33 columns passed, passed data had 34 columns
- Python 打印购物小票
- 阿里云建站产品有哪些?如何选择?
热门文章
- 计算机知识幼儿园,幼儿园中班计算机教学工作计划
- oracle11g到底是什么6,Oracle11g六个重要进程
- 每天一个linux命令(35):ln 命令
- 字节跳动技术整理:mysql性能优化方案
- 【设计思想解读开源框架】java监听模式和观察者模式
- 史上超级详细:HashMap源码分析,你了解到源码的魅力了嘛
- 【机器学习入门到精通系列】不废话直入正题之单变量线性回归(另附单变量非线性代码)
- 机器学习(MACHINE LEARNING)MATLAB进行概率统计分析
- python【力扣LeetCode算法题库】219 -存在重复元素 II
- ubuntu创建新用户名和密码以及查看删除用户