querySelector与querySelectorAll

HTML5学堂:JS获取节点的方法很多,但真正常用的或许就是通过id和标签获取节点,用传统的几种方法想要快速的查找到某个标签,就意味着需要更多的id,命名多了自然就烦了,接下来给大家介绍的方法就能简化很多操作。

常用的获取节点的方法

JS中经常需要获取节点,下面四种是较为常见的。

1、通过id获取节点:document.getElementById("test")

2、通过标签获取节点:document.getElementsByTagName("div")

3、通过类名获取节点:document.getElementsByClassName("test")

4、通过name获取节点:document.getElementsByName("test")

今天给大家介绍另外两种选择器(querySelector和querySelectorAll)及其用法

querySelector和querySelectorAll的基本用法

平常我们在查找节点时总是一个个".getElementById..."这样一层层查找下去,不知不觉查找一个节点就会把代码写的很长,然后就会想,要是能像CSS选择器那样选择该多好啊。

没错,今天介绍的querySelector和querySelectorAll就是可以直接使用CSS选择器一样的写法的方法。

语法:querySelector(CSS选择器),querySelectorAll(CSS选择器)

先来看看案例结构

<img id="outside" src="HTML5学堂.jpg" alt="HTML5学堂" title="HTML5学堂" >
<div id="my-id">
   <img id="inside" src="H5Course.jpg" alt="H5Course" title="H5Course">
   <div class="lonely"></div>
   <div class="outer">
       <div class="inner"></div>
   </div>
</div>

JS部分demo:

document.querySelector("#outside");
document.querySelectorAll("#outside");
document.querySelector(".outer div");
document.querySelectorAll(".outer div");

上面这种写法就省事很多了,直接使用CSS选择器去筛选节点,这样DOM操作就变得更加便捷了。

querySelector和querySelectorAll的区别

querySelector和querySelectorAll他们之间的区别就好比getElementById和getElementsByTagName一样,querySelector返回的是单独的一个节点,而querySelectorAll返回的是一个节点集合,换句话说就是querySelectorAll返回的是一个节点对象的数组。

querySelectorAll和getElementsByTagName的区别

querySelectorAll与getElementsByTagName最终得到的都是一个节点集合,那么他们之间是否只是简化写法这么简单呢。

其实他们并不一样,querySelectorAll更像是jQuery的选择器,获取到的节点都是静态的,而getElementsByTagName获取到的节点是动态的

静态节点和动态节点的理解:静态和动态可以这么理解,静态保存的是过去,而动态永远保存的是现在。关于静态节点动态节点实例可以看这篇文章《获取标签的那些事 之 动态集合》

querySelector和querySelectorAll的注意问题

通过上面的几个步骤,我们基本了解了querySelector和querySelectorAll的用法和区别,但是不要认为仅此而已。先来看看这个demo猜一猜打印出来的值。

demo:

var a = document.getElementById("my-id").getElementsByTagName("div").length;
var b = document.querySelectorAll("#my-id div div").length;
var c = document.querySelector("#my-id").querySelectorAll("div div").length;
var d = document.getElementById("my-id").querySelectorAll("div div").length;
console.log(a);
console.log(b);
console.log(c);
console.log(d);

第一次看觉得答案是3 1 1 1,那么很明显你错了,我们一个个来分析:

1、第一个是以前常用的方法,找id为my-id的节点下的div,因此很容易看出来length等于3。

2、第二个能满足"#my-id div div"结构条件的显然只有一个,因此输出为1。

3、第三个先用querySeletcor找到id为my-id的节点,然后再使用querySelectorAll找"div div"这种结构,然而这里得到的并非是1,而是3,为什么会是3,这里就是querySelectorAll和getElementsByTagName的区别,querySelectorAll查找节点会连同当前所在节点一起查找,也就是说在筛选"div div"这种结构的时候,并不是只在id为"my-id"的内部去查找,而是包括id为"my-id"的节点及其内部节点。因此在"my-id"下满足"div div"这种结构的总共有3个,所以最后输出的length因该为3。

4、第四个与第三个其实是一样的。

结束语

有了这个工具是不是觉得很方便呢,以往你可能为了偷懒,连一个小页面都要引入框架去DOM操作,现在你只需要使用这个工具就能省去了不必要引入的框架,提升了性能,减少了流量。

本分享文章从构思到内容,至排版发布,共耗时:3小时。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-15

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

解决TextView排版混乱或者自动换行的问题

其实在TextView中遇到排版自动换行而导致混乱不堪的情况是非常常见的,而且导致这种问题产生的原因就是英文和中文混合输入,半角字符和全角字符混合在一起了。一般...

2956
来自专栏Python小屋

转义字符'\r'在Python内置函数print()中的妙用

在Python 3.x中,内置函数print()用来实现格式化输出,各参数含义请参考本文末尾的相关阅读。本文重点介绍print()函数的end参数以及转义字符'...

2546
来自专栏西枫里博客

Python学习笔记四(条件和循环)

写在开头:今天催更小伙伴们,突然发现自己的python学习笔记竟然一个月没更了,按照每月总更8篇计算,每月应更2篇左右的python学习笔记,也不知是杂文更的太...

431
来自专栏前端小叙

小程序修改数组中对象的某个值或者修改对象值

setData的时候要修改的值是不需要加this.data.xxx的,直接xxx,

812
来自专栏吴伟祥

Java在线反编译工具 原

该站点提供了一个用户界面,用于从.class和.jar'二进制'文件中提取源代码。

722
来自专栏互联网杂技

HTML5中类jQuery选择器querySelector的使用

简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从...

3407
来自专栏阿凯的Excel

Python读书笔记14(字典的增改删)

上期分享了字典的创建于访问,本期和大家分享的是最重要的营改增政策! 不好意思!串台了,本期和大家分享的是字典的增改删! 一、我们先创建一下新的字典 ? 二、添加...

2688
来自专栏知道一点点

Angularjs快速入门(二)

说说上一节的例子,$scope 我们没有创建这个对象,直接绑定就能获取里面的对象,这种风格遵循了一种叫迪米特法则的设计模式。

601
来自专栏Golang语言社区

Go Template学习笔记

快速开始 func handler(w http.ResponseWriter,r *http.Request){ t := templ...

2987
来自专栏丑胖侠

《Drools7.0.0.Final规则引擎教程》第4章 4.9 关键字

关键字 从Drools 5开始引入了硬关键字和软关键字。硬关键字是保留关键字,在命名demo对象,属性,方法,函数和规则文本中使用的其他元素时,不能使用任何硬关...

17710

扫描关注云+社区