querySelector 和 querySelectorAll 的使用
querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,
对于前端开发人员来说,这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,
你也许会像下面这样:
document.getElementById(
"test"
);
document.querySelectorAll(
"#test"
)[0];
现在我们来试试使用新方法来获取这个元素:
比如接下来这个例子,我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素,
当然这很拗口,但是用本文的新方法来选择这个元素,比用言语来描述它还要简单。
document.querySelector(
"div.test>p:first-child"
);
document.querySelectorAll(
"div.test>p:first-child"
)[0];
现在应该对于 querySelector、querySelectorAll 方法中的参数已经非常明白了,是的,它接收的参数和 CSS 选择器完全一致。
querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素,而querySelectorAll 可以获取多个元素。
querySelector 将返回匹配到的第一个元素,如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组,
如果没有匹配的元素则返回的数组为空。
querySelector 和 querySelectorAll 的使用的更多相关文章
- javascript选择器querySelector和querySelectorAll的使用和区别
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- js高级选择器querySelector和querySelectorAll
querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...
- querySelector和querySelectorAll
jQuery被开发者如此的青睐和它强大的选择器有很大关系,比起笨重的document.getElementById.document.getElementByName… ,查找元素很方便,其实W3C中 ...
- js的querySelector跟querySelectorAll
querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) document.q ...
- document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null. 2.q ...
- 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll
使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...
- 重要选择器querySelector和querySelectorAll
他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...
- 高级选择器querySelector和querySelectorAll
Javascript新提供的querySelector和querySelectorAll方法,是仿照CSS选择器功能编写的 querySelector 功能:该方法返回满足条件的单个元素.按照深度优先 ...
- HTML5中querySelector()和querySelectorAll()
HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器 ...
随机推荐
- SVN安装笔记
1.先去以下网址去下载服务器端与客户端的SVN 2.服务端SVN的安装 点击next 点击next 再点击next 点击next 点击install 点击Finish,这样服务器端的SVN就安装好了, ...
- 设计模式-工厂方法(Demo)
工厂方法 工厂方法跟简单工厂一样.都是创建型的设计模式.他攻克了简单工厂的违背开放封闭的缺点. 故事 主人--人家做饭好累的.女仆抱着我大腿说着.自从上次把她买进家.没做了几次饭就喊累--看着她那出处 ...
- jquery实现无缝滚动
//点击上一页 $('.pointLeft').click(function() { if (prevAllow) { prevAllow = false; scrollUlLeft = scroll ...
- Socket之UDP发送文件
内容导航 一. Socket之UDP异步传输文件 二.Socket之UDP异步传输文件 三.Socket之UDP异步传输文件-多文件传输和文件MD5校验 四.Socket之UDP异步传输文件-用 ...
- Fast portable non-blocking network programming with Libevent--转
Learning Libevent Chapter 0: About this document Chapter 1: A tiny introduction to asynchronous IO. ...
- Preparing for Different Databases
Preparing for Different Databases In the previous chapter, we created a PostRepository that returns ...
- GCD多线程
GCD本质线程自动管理指令包 GCD优点: 1.GCD 本身自带有线程锁的效果,能通过推迟昂贵计算任务并在后台运行它们来改善应用的响应性能. 2.GCD 提供了更易于使用的并发模型(效果方面类似于对锁 ...
- 关于SQL语言的优化(Oracle)
SQL优化的原则 尽量使用列名 --SQL 优化2: where解析的顺序 : 右--> 左 Select * from zl_yhjbqk where dy_dj = '1K以下' ...
- Android开发了解——Dalvik
Dalvik是Google公司自己设计用于Android平台的Java虚拟机.Dalvik虚拟机是Google等厂商合作开发的Android移动设备平台的核心组成部分之一.它可以支持已转换为 .dex ...
- my_vimrc
" ----------------- Author: Ruchee" ----------------- Email: my@ruchee.com" --------- ...