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 条评论
登录 后参与评论

相关文章

来自专栏JavaEE

jQuery入门前言

上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库,简单的说就是封装了一些Java...

10530
来自专栏柠檬先生

jquery事件绑定

.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventOb...

22870
来自专栏积累沉淀

JavaScript DOM操作表格及样式

一.操作表格 <table>标签是HTML中结构最为复杂的一个,可以通过DOM来创建生成它(比较麻烦),或者HTML DOM来操作它。 //需要操作的table...

277100
来自专栏coding for love

CSS常用布局实现03-水平垂直居中

其实,水平居中和垂直居中都是水平垂直居中的一部分,所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中,那么居中的元素肯定是有宽度和高度的,要么是...

10310
来自专栏互联网开发者交流社区

JS总结

17540
来自专栏Angular&服务

数据绑定

12330
来自专栏云端架构

【云端架构】前端必备常用CSS语法

属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

37080
来自专栏微信小程序开发

理解jquery的$.extend & $.fn.extend用法

jQuery为开发插件提拱了两个方法,分别是: 1、jQuery.fn.extend(); //dom方法 2、jQuery.extend(); // 工具...

35090
来自专栏flutter开发者

Flutter动画【2】

在上次的文章中我们学习了Tween动画的用法,我们也一块看了下AnimatedBuilder和AnimatedWidget的用法,通过Tween动画结合相应的W...

1.1K40
来自专栏菜鸟前端工程师

JavaScript学习笔记001-变量0获取和操作标签

13120

扫码关注云+社区

领取腾讯云代金券