querySelectorAll与querySelector

栏目: jQuery · 发布时间: 7年前

内容简介：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>

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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

高性能MySQL

施瓦茨 (Baron Schwartz)、扎伊采夫 (Peter Zaitsev)、特卡琴科 (Vadim Tkachenko) / 宁海元、周振兴、彭立勋、翟卫祥,刘辉 / 电子工业出版社 / 2013-5-1 / 128.00元

《高性能mysql(第3版)》是mysql 领域的经典之作，拥有广泛的影响力。第3 版更新了大量的内容，不但涵盖了最新mysql 5.5版本的新特性，也讲述了关于固态盘、高可扩展性设计和云计算环境下的数据库相关的新内容，原有的基准测试和性能优化部分也做了大量的扩展和补充。全书共分为16 章和6 个附录，内容涵盖mysql 架构和历史，基准测试和性能剖析，数据库软硬件性能优化，复制、备份和恢复，高可......一起来看看《高性能MySQL》这本书的介绍吧!

码农工具