HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。
注意： querySelector() 方法【仅仅返回】匹配指定选择器的【第一个元素】。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
querySelector()参数类型可以为如下：
指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于【多个选择器，使用逗号隔开】，返回一个匹配的元素。
获取文档中id=”container”的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="contatiner">huang</div>
<p class="lover">XXX</p>
<a href="https://www.taobao.com" target="_blank">淘宝一下</a>
<h2>二级标题</h2>
<h3>三级标题</h3>
<script type="text/javascript">
var destination = document.querySelector("#contatiner");
var node = document.querySelector("p.lover");
var node2 = document.querySelector("a[target]");
console.log(destination);
console.log(node);
console.log(node2);
document.querySelector("h2,h3").style.backgroundColor = "blue";
</script>
</body>
</html>
结果：
<div id="contatiner">huang</div>
<p class="lover">XXX</p>
<a href="https://www.taobao.com" target="_blank">淘宝一下</a>
querySelectorAll与querySelector的区别:
querySelectorAll : 找出所有匹配的节点并返回数组.
querySelector : 找到一个后就返回节点对象。
1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果
找出body标签下的第一个div
document.body.querySelectorAll("div")[0]
找出所有标签
document.querySelectorAll("*")
找出head下所有的标签
document.head.querySelectorAll("*")
找出所有class=box的标签
document.querySelectorAll(".box")
找出所有class=box的div标签
document.querySelectorAll("div.box")
找出所有id=lost的标签
document.querySelectorAll("#lost")
找出所有p标签并且id=lost的标签
document.querySelectorAll("p#lost")
找出所有name=qttc的标签
document.querySelectorAll("*[name=qttc]")
找出所有存在name属性的标签
document.querySelectorAll("*[name]")
找出所有class=hot并且存在name属性的p标签
document.querySelectorAll("p.hot[name]")
document.querySelectorAll("p[class=hot][name]")
相关推荐
先按W3C的规范来说这两个方法应该返回的内容吧，大家先看下官方的解释，然后根据需要选择使用
其实关于querySelector和querySelectorAll的介绍说明很多。在此主要是做个记录
其实关于querySelector和querySelectorAll的介绍说明很多,在此主要是做个记录
下面小编就为大家带来一篇javascript高级选择器querySelector和querySelectorAll全面解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)