querySelectorAll与querySelector

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

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

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

码农书籍

深入应用C++11

祁宇 / 机械工业出版社 / 2015-5 / 79

在StackOverflow的最近一次世界性调查中，C++11在所有的编程语言中排名第二， C++11受到程序员的追捧是毫不意外的，因为它就像C++之父Bjarne Stroustrup说的：它看起来就像一门新的语言。C++11新增加了相当多的现代编程语言的特性，相比C++98/03，它在生产力、安全性、性能和易用性上都有了大幅提高。比如auto和decltype让我们从书写冗长的类型和繁琐的类型......一起来看看《深入应用C++11》这本书的介绍吧!

码农工具