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

相关文章

来自专栏技术博客

Knockout.Js官网学习(enable绑定、disable绑定)

enable绑定使DOM元素只有在参数值为 true的时候才enabled。在form表单元素input,select,和textarea上非常有用。

792
来自专栏DT乱“码”

jQuery封装的AJAX使用

jQuery 中的 Ajax jQuery为我们提供了更强大的Ajax封装 $.ajax({}) 可配置方式发起Ajax请求 $.get() 以GET方式发起A...

1966
来自专栏xingoo, 一个梦想做发明家的程序员

DoModal 函数的用法

使用有模式对话框时在对话框弹出后调用函数不会立即返回,而是等到对话框销毁后才会返回(请注意在对话框弹出后其他窗口的消息依然会被传递)。所以在使用对话框时其他窗口...

3159
来自专栏柠檬先生

vue2.0 配置 选项 属性 方法 事件 ——速查

全局配置               silent        设置日志与警告     optionMergeStrategies         合并策...

1769
来自专栏思考的代码世界

Python编程从入门到实践之字典|第5天

在Python中,字典是一系列键—值对。每个键都与一个值相关联,你可以使用键来访问与之 相关联的值。与键相关联的值可以是数字、字符串、列表乃至字典。事实上,可将...

3429
来自专栏青青天空树

postMessage 消息传递

        web开发了,除了前台与服务器交换数据,还有可能前台页面间需要进行数据传递,比如窗口间,页面和嵌套的iframe间。这些问题之前都有解决办法,但...

793
来自专栏电光石火

获取URL地址中的GET参数

/*-----------------实现1--------------------*/ function getPar(par){ //获取当前URL...

1849
来自专栏Python

Django视图层之路由配置系统(urls)

视图层之路由配置系统(urls) URL配置(URLconf)就像Django 所支撑网站的目录。它的本质是URL与要为该URL调用的视图函数之间的映射表;你就...

1939
来自专栏IT 指南者专栏

前端系列之JavaScript基础知识概述

微信公众号:compassblog 欢迎关注、转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1、什么是JavaScript (1)、JavaScri...

2909
来自专栏coding

vue.js进行数据监听

863

扫码关注云+社区