js的querySelector跟querySelectorAll

最新推荐文章于 2025-02-24 23:24:00 发布
最新推荐文章于 2025-02-24 23:24:00 发布
阅读量813 收藏
点赞数
分类专栏： 前端 文章标签： js queryselector queryselectorall
原文链接：https://www.mk2048.com/blog/blog.php?id=hhi2jc01jhaa&title=js%E7%9A%84querySelector%E8%B7%9FquerySelectorAll
版权
本文详细解析了DOM中querySelector和querySelectorAll的区别与用法。前者用于选取页面上第一个匹配的选择器，而后者则返回所有匹配的选择器集合。通过实例演示，帮助读者深入理解这两种选择器的特性。
摘要由CSDN通过智能技术生成

querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个)

　　　　　　　document.querySelector('#idName')------->可以选中#idName的一个dom

querySelectorAll('.className'):这个的话就是可以选取页面上全部.className的dom元素，不止一个哦

这个是为什么啊？为什么querySelector跟querySelectorAll打印出来不一样呀

 


更多专业前端知识，请上 【猿2048】www.mk2048.com
javascript之querySelector和querySelectorAll使用说明
10-28
`querySelector` 和 `querySelectorAll` 是JavaScript中用于选取DOM元素的两个强大方法，它们都是在DOM元素或文档对象上可用的。这两个API在现代浏览器中得到了广泛支持，为开发者提供了便利的选择器操作。 首先，`...
javascript高级选择器querySelector和querySelectorAll全面解析
11-27
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 querySelector 和 querySelectorAll 在规范中定义了如下接口： module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in
【JS】querySelectorAll和getElementsByClassName
owo_ovo的博客
04-15 338
【JS】querySelectorAll和getElementsByClassName
js中的document.querySelector()方法
withkai44的博客
11-29 1万+
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。位于元素之前，元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
JavaScript querySelector()、querySelectorAll() CSS选择器解析（DOM元素选择）（DOM查询）
最新发布
Dontla的博客
02-24 521
返回匹配的第一个元素返回NodeList集合参数接受标准CSS选择器语法支持在任意Element节点上调用。
JS中【querySelector】详解
2301_79858914的博客
08-28 4994
是 JavaScript 中用于查找 DOM 元素的一个非常强大的方法。它允许你根据 CSS 选择器从文档中查找并返回第一个匹配的元素。这个方法在现代浏览器中广泛支持，并且可以通过选择器灵活地访问 DOM 树中的元素。
js之querySelector方法
dingbin1973的博客
05-30 1929
querySelector()接受一个CSS选择符，返回匹配的第一个元素，反之则NULL。 如： 　　var body = document.querySelector('body'); 　　var mydiv = document.querySelector('#mydiv'); 　　var myclass = document.querySelector('.selected...
js选择器：querySelector和querySelectorAll
QUX轻博客
09-08 1363
1.二者区别 querySelector是单一选择器，得到的是唯一的一个元素； querySelectorAll，得到的是一个数组，所有名为“*”的集合； ...
javascript之querySelector和querySelectorAll使用介绍
10-28
在Web开发中，JavaScript为操作DOM（文档对象模型）提供了许多API，其中包括querySelector和querySelectorAll这两个方法。这两个方法为开发者提供了查询DOM元素的能力，类似于jQuery所提供的选择器功能，但它们是...
再谈querySelector和querySelectorAll的区别与联系
09-05
`querySelector` 和 `querySelectorAll` 是在Web开发中用于选取HTML或XML文档中特定元素的JavaScript API，它们都基于CSS选择器。这两个方法都定义在DOM接口中，可以在任何支持这些方法的DOM节点上使用。 **...
Javascript教程:querySelector()方法
10-14 2937
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements N
JavaScript querySelector()、querySelectorAll()方法介绍
路虽远，行则必至！
06-26 4万+
一、getElementsByClassName()方法不足之处 在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。 在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法，这种方法在我们的实际开发中也很常用，因此我们要熟练掌握...
JS中【querySelectorAll】详解
2301_79858914的博客
08-28 3445
是 JavaScript 中用于查找符合指定 CSS 选择器的DOM 元素的一个方法。与不同，返回的是一个的NodeList，包含文档中匹配选择器的所有元素。
JavaScript中的querySelector()方法是什么，它是如何工作的？
晓风晓浪
02-15 5599
在JavaScript中，有时您需要访问HTML元素。querySelector方法是一个Web API，它选择与传入的指定CSS选择器匹配的第一个元素。但是，更详细地说，这是如何工作的呢？在本文中，我们将看一些如何使用querySelector方法以及querySelectorAll方法的示例。（本文内容参考：java567.com）
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
CYK_byte的博客
11-04 2万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
JavaScript - querySelector 和 querySelectorAll
Bi-Hu的博客
05-18 192
querySelector 和 querySelectorAll 这两个方法呢 是JS中嫌原生获取节点函数太少 而 去引进的 用法都是接受一个字符串 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 但是！ querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替...
JavaScript选择器函数querySelector和querySelectorAll
热门推荐
小天空的博客
07-13 5万+
选择器是非常强大的功能，早先一般是通过和来获取页面元素，在一些场景下就很不方便。后来DOM扩展出了标准，其中包含了和两个方法，可以通过Css选择器匹配页面元素。用于查询页面中第一个符合规则的元素，可以在实例和实例上调用，接收一个选择器字符串参数，如果查找到则返回 对象，否则返回。语法格式如下：123实例调用是获取整个页面匹配的元素。简单示例如下：12345678910111213141516171819202122232425实例调用是获取该元素子树内匹配的元素。简单示例：12345678910111213
JS选择器querySelector和~All，三个原生选择器
Lawliet
09-28 2万+
比较高级的万能选择器，比较常用 定义： querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 语法 document.querySelector(CSS selectors)
js queryselector和queryselectorall
10-19
在JavaScript中，`querySelector` 和 `querySelectorAll` 是用于操作文档中元素的两个DOM API方法。 1. **querySelector**: 这个方法接收一个CSS选择器作为参数，并返回匹配该选择器的第一个元素。它是最常用的获取...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值