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

相关文章

来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

3739
来自专栏栗霖积跬步之旅

1.react的基础知识

React 的基础之:JSX 语法 react 使用 JSX 语法,js 代码中可以写 HTML 代码。 let myTitle = <h1>Hello, Wo...

2786
来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

1749
来自专栏Ryan Miao

java变量的加载顺序

学习编程思想 1 package com.test.java.classs; 2 3 /** 4 * Created by Administrato...

2439
来自专栏天天

动画

512
来自专栏phodal

WebStorm重构快捷键

JavaScript重构 结合 快捷键 是真正的神器。 ? 按下Command + Option + Shift + T,会有重构的菜单出现 ? 重构之前...

3745
来自专栏JavaEE

jQuery入门前言

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

633
来自专栏Python

Django比较相等或者不相等的模板语法ifequal / ifnotequal

ifequal / ifnotequal      在模板语言里比较两个值并且在他们一致的时候显示一些内容,Django提供了 ifequal 和 ifnote...

2026
来自专栏云端架构

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

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

3538
来自专栏不止是前端

Vue:Vue中操作DOM方法

4519

扫码关注云+社区