HTML5学堂-码匠 HTML5学堂

您当前位于:DOM 文档操作 ——> querySelector与querySelectorAll,选择标签的快捷方法

querySelector与querySelectorAll,选择标签的快捷方法

2016/01/14 22:31:43 | 作者:HTML5学堂(码匠) | 分类:DOM 文档操作 | 关键词:querySelector,querySelectorAll

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选择器)

先来看看案例结构

  1. <img id="outside" src="HTML5学堂.jpg" alt="HTML5学堂" title="HTML5学堂" >
  2. <div id="my-id">
  3.     <img id="inside" src="H5Course.jpg" alt="H5Course" title="H5Course">
  4.     <div class="lonely"></div>
  5.     <div class="outer">
  6.         <div class="inner"></div>
  7.     </div>
  8. </div>

JS部分demo:

  1. document.querySelector("#outside");
  2. document.querySelectorAll("#outside");
  3. document.querySelector(".outer div");
  4. 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:

  1. var a = document.getElementById("my-id").getElementsByTagName("div").length;
  2. var b = document.querySelectorAll("#my-id div div").length;
  3. var c = document.querySelector("#my-id").querySelectorAll("div div").length;
  4. var d = document.getElementById("my-id").querySelectorAll("div div").length;
  5. console.log(a);
  6. console.log(b);
  7. console.log(c);
  8. 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学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS