更方便的DOM选择器 querySelector

用过jQuery或者一些其它js库的少年们都应该知道他们都有自己的选择器,使用起来各种方便各种狂拽酷霸吊,简化了原本元素获取的许多麻烦。

用jQuery来举个例子,比如你要获取id为f_ck的元素(第一个)

var e=$("#f_ck")

这样就得到了元素的jquery对象(注意这样获取到的不是元素本身,而是一个满足条件的元素的数组,配上一些方便的元素操作方法)
用传统的getelement的话会是这个样子

var e=document.getElementById("f_ck");

这么写明显长一点,而且只能获取有特定id的元素。

关键问题其实不在这里,在于通过其他属性获取元素,而每个属性都需要一个单独的方法,例如

//通过类名
document.getElementByClassName()
//通过标签名
document.getElementByTagName()
//获取一个元素里符合条件的另一个元素
document.getElementByClassName().getElementByClassName()
//甚至
document.getElementByClassName().getElementByTagName().getElementById()

简直丧心病狂-_-|||

新方法

于是我刚刚翻js书的时候发现了另一种获取元素的方法,这是一种新方法,可以像jquery那样方便地获取元素
一共有两个可用函数

document.querySelector()
document.querySelectorAll()

首先还是要说一下使用方法的

//获取id为miao的元素
document.querySelector("#miao")

是不是和jquery的获取方法很像呢,其实与其说是和jQuery的方法很像,不如说这就是直接用了css元素选择器。

举点其它例子

//获取类为wang的元素
document.querySelector(".wang")
//获取标签为div的元素
document.querySelector("div")
//获取id为miao元素里的p元素
document.querySelector("#miao p")

querySelectorAll()的使用方法相同,它们的区别在于:

  • querySelector()只会获取符合条件的第一个元素,返回的是一个元素,如果没有匹配的元素,那么返回null。
  • querySelectorAll()返回的是一个Nodelist,你可以看作是一个数组(经博主测试,就算是通过id获取也会返回一个数组,而且有多个同id的元素的话也都会返回),没有匹配元素的话返回的是一个空Nodelist(length==0)这看起来书写长度好像也和之前的差不多嘛,为什么说它方便呢,因为这种元素获取方式也只要调用一种方法,但是可以使用多种条件,所以我们可以把它装进一个自定义函数里面来缩短它
function $_dom(selector){
	return document.querySelectorAll(selector);
}

这样子的话上面的例子就可以缩短成

//获取id为miao的元素
$_dom("#miao")[0]
//获取类为wang的元素
$_dom(".wang")[0]
//获取标签为div的元素
$_dom("div")[0]
//获取id为miao元素里的p元素
$_dom("#miao p")[0]

是不是一下子就清晰简短了很多呢?
你会发现我在每句后面还都加了个[0],因为这里函数里写的是querySelectorAll(),返回的是一个Nodelist,加上[0]即提取出结果里的第一个元素。当然你很计较内存使用和运行速度的话就给它们分别定义短名函数。

其它用法

除了可以在document对象上执行此方法,你也可以在任何元素对象上执行此方法,用于在这个元素里面寻找满足条件的元素,例如

let poi=document.querySelector('#poi');//找到id为poi的元素

let poipoi=poi.querySelector('#poipoi');//在poi元素里寻找id为poipoi的元素

 

=============更新log===============

  • 2021/11/16:整理了一下一些有歧义的语句,添加html元素都有此方法的说明


本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。