内容简介：HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。注意： querySelector() 方法querySelector()参数类型可以为如下：
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]")
以上所述就是小编给大家介绍的《querySelectorAll与querySelector》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
