用过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元素都有此方法的说明