document.querySelector(),document.querySelectorAll()

最新推荐文章于 2024-06-12 11:48:08 发布
最新推荐文章于 2024-06-12 11:48:08 发布
阅读量3.9k 收藏 6
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq2071114140/article/details/108012264
版权

document.querySelector(),document.querySelectorAll()

除了使用DOM的对象结点之间的关系选择一个元素结点外，还可以通过CSS的选择器选择元素结点。

document对象中，有两个方法querySelector()和querySelectorAll()。

这两个方法的参数相同，都是一个CSS选择器表达式（字符串形式），通过这个选择器表达式，选择元素。

举例：

		<script type="text/javascript">
			window.onload = function(){
				var top = document.querySelector("#top");
				console.log("--------querySelector()---------\n" + top.innerHTML);
				
				var p = document.querySelector(".top p");
				console.log("--------querySelector()---------\n" + p.innerHTML);
				
				tops = document.querySelectorAll(".top");
				console.log("--------querySelectorAll()选择多个-------")
				for(let i = 0; i < tops.length; ++i){
					console.log(tops[i].innerHTML);
				}
			};
		</script>



	<body>
		<div id="main">
			<div id="top" class="top">1</div>
			<div id class="top"><p>2</p></div>
		</div>
		
	</body>

在这里插入图片描述

通过上面的例子也可以看到，对于querySelector()方法来说，只会返回匹配的第一个元素结点。

querySelectorAll()会把匹配的所有元素节点封装成一个数组返回。

丨Q ，Q丨
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.querySelectorAll()选取元素列表的用法
quietbxj的博客
06-13 1万+
document.querySelectorAll()选取元素列表的用法，如下：
document.querySelector()方法
热门推荐
qq_44885775的博客
04-26 6万+
javascript dom 查找匹配
javascript：document.querySelectorAll函数
最新发布
听海边涛声
06-12 296
javascript：document.querySelectorAll函数
document.querySelector什么意思
ggq53219的博客
06-11 230
是 Web API 中的一个方法，用于从文档（DOM）中选择与指定选择器或选择器组匹配的第一个Element。如果没有找到任何匹配的元素，则返回null。这个方法使用的是 CSS 选择器语法来选择元素。
document.querySelector和querySelectorAll方法
zzj19990913的博客
02-09 1198
querySelector和querySelectorAll是W3C提供的 新的查询接口，其主要特点如下： 1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。 这两个方法...
document.querySelector()用法
七十多岁的人了、
02-23 4万+
document.querySelector
document.querySelector()和document.querySelectorAll()用法
小妖666个人笔记
03-13 7548
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。 所以CSS 选择器支持的语法，querySelector() 都可以使用。下面例举了一些常用的用法： 实例：获取文档中第一个 <p> 元素 document.querySelector("p"); 实例：获取文档中 id="dem...
js中的document.querySelector()方法
withkai44的博客
11-29 9428
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。位于元素之前，元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
document.querySelector用法
qq_46312886的博客
04-08 907
是一个DOM方法，它接受一个CSS选择符参数，返回文档中第一个匹配该选择符的元素。如果没有匹配的元素，则返回null。只会返回一个匹配的元素，如果需要返回所有匹配的元素，可以使用。也支持传递多个选择器并返回匹配的第一个元素。除了返回第一个匹配的元素，
document.querySelector()和document.querySelectorAll()
qq_54235625的博客
06-08 415
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
document.querySelector()选择器的用法
qq_36465515的博客
12-10 3663
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="myId"></div> <div class="myClass"></div> </body> <script type="text/javascript"> var d
JS的document.all函数使用示例
10-26
由于`document.all`并非标准的DOM方法，因此在现代浏览器中已不再推荐使用，而是倾向于使用`document.getElementById`、`document.getElementsByTagName`、`document.querySelector`和`document.querySelectorAll`等...
nimquery：Nim库，用于使用CSS选择器查询HTML（例如JavaScripts document.querySelector）
02-03
它的灵感来源于JavaScript中的`document.querySelector`和`document.querySelectorAll`方法，使得在Nim语言中进行HTML解析和元素查找变得异常简单。Nimquery库的目标是为开发者提供一种简洁的API，以便于他们在Nim...
js中document.getElementByid、document.all和document.layers区分介绍
10-28
随着Web技术的发展，`document.layers`和`document.all`已经逐渐被淘汰，取而代之的是基于DOM标准的方法，如`getElementById`，`querySelector`，`querySelectorAll`等。这些标准化的方法提供了更强大、更一致的跨...
TypeError document.getElementById(...) is null错误原因
09-03
- **使用`querySelector`或`querySelectorAll`**：这两个方法更强大，可以处理CSS选择器，但同样需要注意元素是否已加载。 - **条件检查**：在访问获取到的元素之前，先检查它是否为`null`，以避免不必要的错误： ...
js querySelector() 使用方法
11-26
这个方法在处理单个元素时非常有用，因为`querySelector()`只会返回匹配选择器的第一个元素，而不是像`querySelectorAll()`那样返回一个包含所有匹配元素的NodeList。 **基本语法**： ```javascript document....
通过DOM对象获取/修改CSS样式 & class
qq2071114140的博客
08-18 7883
文章目录通过DOM对象获取/修改CSS样式1.获取 & 修改内联样式2. 获取当前样式IE8及以下不支持，其它支持：`window.getComputedStyle(element)`仅IE浏览器支持：`element.currentStyle.XXX`封装一个通用的方法总结 通过DOM对象获取/修改CSS样式 1.获取 & 修改内联样式 对于一个元素结点来说，内联样式style就是元素结点的一个属性节点。 可以通过element.style.XXX来获取这个元素结点的内联样式；同时，也可以
JS函数对象的方法
qq2071114140的博客
08-22 2614
JS函数对象的方法 一.概述 JS中，函数是一种特殊的对象，既然是对象，那么，函数对象也想其他对象一样，可以有自己的方法，这里，主要介绍两个方法。call()方法和apply()方法 二.call()方法 function Student(name, age){ this.name = name; this.age = age; } Student.prototype....
document.querySelectorAll和document.querySelector
05-24
这两个方法都是 JavaScript 中用于选择 DOM 元素的方法。 `document.querySelector` 方法返回文档中第一个匹配指定选择器的元素，如果找不到匹配的元素，则返回 null。 例如： ```javascript const element = document.querySelector('.example'); ``` 上面的代码会返回第一个 `class` 属性为 `example` 的元素。 `document.querySelectorAll` 方法返回文档中所有匹配指定选择器的元素，如果找不到匹配的元素，则返回空的 NodeList 对象。 例如： ```javascript const elements = document.querySelectorAll('.example'); ``` 上面的代码会返回所有 `class` 属性为 `example` 的元素的 NodeList 对象。 总之，`document.querySelector` 返回的是单个元素，而 `document.querySelectorAll` 返回的是多个元素的 NodeList 对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值