document.querySelector()方法

最新推荐文章于 2024-06-10 21:49:00 发布
最新推荐文章于 2024-06-10 21:49:00 发布
阅读量10w+ 收藏 225
点赞数 72
分类专栏： html 文章标签： document.querySelector
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangbaokang/article/details/79659246
版权

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程

HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。

获取文档中id="container"的元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="contatiner">huang</div>
	<script type="text/javascript">
		var destination = document.querySelector("#contatiner");
		console.log(destination);
	</script>
</body>
</html>

这里写图片描述

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

参数类型可以为如下：

指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器，使用逗号隔开，返回一个匹配的元素。

获取第一个p元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<p>张露露，我爱你</p>
	<p>黄宝康，我也爱你</p>

	<script type="text/javascript">
	var node = document.querySelector("p");
		console.log(node);
	</script>
</body>
</html>

这里写图片描述

获取文档中的第一个class="lover"的元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<span class="lover">张露露</span>
	<span class="lover">黄宝康</span>

	<script type="text/javascript">
	var node = document.querySelector(".lover");
		console.log(node);
	</script>
</body>
</html>

这里写图片描述

获取class=“lover” 的第一个p元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<span class="lover">张露露</span>
	<p class="lover">黄宝康</p>

	<script type="text/javascript">
	var node = document.querySelector("p.lover");
		console.log(node);
	</script>
</body>
</html>

这里写图片描述

获取第一个带target属性的a元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<a href="http://www.baidu.com">百度一下</a>
	<a href="https://www.taobao.com" target="_blank">淘宝一下</a>

	<script type="text/javascript">
	var node = document.querySelector("a[target]");
		console.log(node);
	</script>
</body>
</html>

这里写图片描述

多个选择器的使用方法

以下代码将为文档的第一个 <h2> 元素添加背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<script type="text/javascript">
		document.querySelector("h2,h3").style.backgroundColor = "blue";
	</script>
</body>
</html>

这里写图片描述

但是，如果文档中 <h3> 元素位于 <h2> 元素之前，<h3> 元素将会被设置指定的背景颜色。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<h3>三级标题</h3>
	<h2>二级标题</h2>
	
	<script type="text/javascript">
		document.querySelector("h2,h3").style.backgroundColor = "blue";
	</script>
</body>
</html>

这里写图片描述

总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。

黄宝康
关注
  • 72
    点赞
  • 踩
  • 225
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 30
    评论
专栏目录
react-dsmjs:React.render（ClientOrServer，document.querySelector（'。you-decide'））;
05-16
react-dsmjs （ClientOrServer，document.querySelector（'。you-decide'））;它是MVC中的V 与Angular和Backbone等其他框架配合良好JSX，结合了您的标记和行为JS 尝试使用原始JS，例如数组，对象和函数虚拟DOM 区分...
nimquery：Nim库，用于使用CSS选择器查询HTML（例如JavaScripts document.querySelector）
02-03
它的灵感来源于JavaScript中的`document.querySelector`和`document.querySelectorAll`方法，使得在Nim语言中进行HTML解析和元素查找变得异常简单。Nimquery库的目标是为开发者提供一种简洁的API，以便于他们在Nim...
document.queryselector怎么用
最新发布
ggq53219的博客
06-10 220
是一个在 JavaScript 中常用的 DOM API，它返回文档中匹配指定 CSS 选择器的第一个 Element 元素。如果没有找到匹配的元素，则返回。选择文本内容是不直接的，但你可以结合其他方法或库来实现这一点。但如果你只是想通过其他属性或选择器来间接地选择具有特定文本的元素，那么你可以这样做。是一个强大的工具，允许你使用几乎任何 CSS 选择器来从 DOM 中选择元素。假设你想选择 ID 为 "parent" 的元素的第一个子。
选择器 document.querySelector()
蒲公英芽的博客
01-03 1万+
获取页面中的元素可以通过以下几种途径： 通过 id 名 通过 标签名 通过 class 名 通过 name 的值 querySelector 对应的方法为： document.getElementById("")，根据id获取元素，只能获取唯一一个，只能使用document获取。 document.getElementById(""); //根据id获取元素，只能获取唯一一个 //只能使用...
介绍函数用法：document.querySelector
m0_57236802的博客
04-21 1万+
是一个 JavaScript 函数，它允许你通过提供一个 CSS 选择器来选择文档中的第一个匹配的元素。这个函数返回匹配的元素（如果找到了匹配项），否则返回。是一个非常有用的方法，因为它让你可以通过多种选择器轻松地选择和操作 DOM 元素。只返回第一个匹配的元素。如果你想选择文档中的所有匹配的元素，可以使用。这个函数返回一个包含所有匹配元素的 NodeList。是一个包含 CSS 选择器的字符串，用于查找和选择元素。这将选择文档中第一个类型为。这将选择文档中的第一个。
document.querySelector()用法
热门推荐
七十多岁的人了、
02-23 4万+
document.querySelector
js querySelector() 使用方法
11-26
`querySelector()` 是JavaScript中用于选择DOM元素的强大方法，它基于CSS选择器来定位页面上的特定元素。这个方法在处理单个元素时非常有用，因为`querySelector()`只会返回匹配选择器的第一个元素，而不是像`...
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
Document和Document.all区别分析
09-06
例如，通过 `document.getElementById` 或 `document.querySelector` 方法，我们可以找到文档中具有特定ID或满足CSS选择器的元素。 然而，`Document.all` 是一个过时的属性，它返回一个HTMLAllCollection对象，这个...
使用document.querySelector()搜索时,点‘.‘和井号‘#‘的用法
qq_45927587的博客
10-24 913
document.querySelector()搜索时--> .和#的用法
document.querySelector()选择器的用法
qq_36465515的博客
12-10 3655
<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
document.querySelector()和document.querySelectorAll()用法
小妖666个人笔记
03-13 7543
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。 所以CSS 选择器支持的语法，querySelector() 都可以使用。下面例举了一些常用的用法： 实例：获取文档中第一个 <p> 元素 document.querySelector("p"); 实例：获取文档中 id="dem...
document.querySelector
qq_44709805的博客
11-08 3449
document.querySelector 这个document对象的querySelector是HTML5API新定义的方法 如果是id选择器传放一个参数“#id” id选择器返回这个节点元素对象 如果是class的选择器则传入一个".class" class选择器返回document节点或id节点元素对象中的第一个元素 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> &.
使用xpath实现document.querySelector样式选择器进行html解析（一）：将html转成xml
weixin_34055910的博客
06-26 459
使用xpath实现document.querySelector样式选择器进行html解析（一）：将html转成xml 使用xpath实现document.querySelector样式选择器进行html解析（二）：扩展一下xpath以便支持正则 使用xpath实现document.querySelector样式选择器进行html解析（三）：实现样式选择...
webApi02
qq_36343904的博客
05-19 437
day02 - Web APIs 1.1. 排他操作 1.1.1 排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button&g...
document.querySelector 方法返回了 null
11-12
当使用 `document.querySelector` 方法时，如果没有找到匹配的元素，则该方法将返回 `null`。这可能是由于以下原因之一导致的： 1. 没有找到与提供的选择器匹配的元素。 2. 选择器本身无效，例如包含无效的语法或选择器字符串中的拼写错误。 3. 代码中的其他问题导致无法正确执行查询。 以下是一个示例，演示了当选择器无效时，`document.querySelector` 方法返回 `null` 的情况： ```javascript var element = document.querySelector('invalidSelector'); console.log(element); // 输出：null ``` 如果您遇到了这个问题，您可以尝试以下解决方案： 1. 确保选择器字符串正确无误，可以使用浏览器的开发者工具来检查选择器是否有效。 2. 确保您的代码没有其他问题，例如变量名拼写错误或其他语法错误。 3. 如果您正在使用 `getElementById` 方法获取父元素，请确保该元素存在于文档中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 30
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值