querySelectorAll与querySelector

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

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

查看所有标签

猜你喜欢:

querySelectorAll与querySelector

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

码农书籍

开发高质量PHP框架与应用的实际案例解析

Sebastian Bergmann / 刘文瀚、刘海燕 / 清华大学出版社 / 2012-6 / 49.00元

PHP已经成为最受欢迎的编程语言之一，这使得用PHP创建高质量、易维护的应用程序和框架比以往受到更多的青睐。通过使用来自于知名公司的真实案例研究，《开发高质量PHP框架与应用的实际案例解析》为Web软件体系结构的不同层次介绍了规划、执行以及测试自动化方面的内容，并解释了这些公司如何测量和测试软件质量。《开发高质量PHP框架与应用的实际案例解析》作者Sebastian Bergmann、Stefan......一起来看看《开发高质量PHP框架与应用的实际案例解析》这本书的介绍吧!

码农工具