内容简介：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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
游戏编程算法与技巧
【美】Sanjay Madhav / 刘瀚阳 / 电子工业出版社 / 2016-10 / 89
《游戏编程算法与技巧》介绍了大量今天在游戏行业中用到的算法与技术。《游戏编程算法与技巧》是为广大熟悉面向对象编程以及基础数据结构的游戏开发者所设计的。作者采用了一种独立于平台框架的方法来展示开发，包括2D 和3D 图形学、物理、人工智能、摄像机等多个方面的技术。《游戏编程算法与技巧》中内容几乎兼容所有游戏，无论这些游戏采用何种风格、开发语言和框架。 《游戏编程算法与技巧》的每个概念都是用C#......一起来看看 《游戏编程算法与技巧》 这本书的介绍吧!
