javascript 选择器之 querySelector,querySelectorAll 学习

最新推荐文章于 2023-02-10 10:30:14 发布
最新推荐文章于 2023-02-10 10:30:14 发布
阅读量167 收藏
点赞数
分类专栏： javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sfSam/article/details/84177103
版权

CSS选择器的方便强大之处想必经常使用的人都有了解。

 

javascript原始库中提供选取DOM节点的方法少之又少，W3C组织也注意到了这里的不足所以 querySelector,querySelectorAll 接口便应运而生

 

querySelector,querySelectorAll 方法让你以一个CSS选择器（这就是重点）作为参数去选取DOM元素。

 

这两个方法之间的相同之处是他们使用了相同的引擎，并且选取节点的效率很高，两者的不同是前者查找到第一个匹配元素后就将其返回并且不再继续查询（返回单个元素），而后者则返回一个匹配元素的List集合（页面中所有匹配的元素）。这与jQUery的选择其非常相似（事实上jQuery就是使用了此接口）

 

浏览器的支持程度：ff3.1+，IE8+(IE8标准模式，太好了变态的IE8都支持了，大家就放心其他主流浏览器吧) ，safari3.1+

sfSam
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈JavaScript高级选择器querySelector和querySelectorAll
筱葭的博客
04-25 1683
querySelector和querySelectorAll根据CSS选择器规范，便捷定位文档中指定元素，主流浏览器均支持：包括 IE8+、Firefox、Chrome、Safari、Opera。 querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。 querySelector系列方法与getElementBy系列方法的区别： 1
JavaScript（二）
nabirt的博客
12-12 2547
WebAPIs — 关于DOM的学习笔记
java script 选择器_JavaScript选择器
weixin_36289813的博客
02-27 384
元素节点选择器：id选择器 、 class选择器、 name选择器 、 tagname选择器、 高级选择器 、关系选择器ID选择器：返回单个对象；//假设页面上有一个id名为box的元素var box = document.getElementById("box");console.log(box)//选中这个元素class选择器：返回数组对象，可通过索引解析其中的元素。var aco...
querySelector()方法
soos的博客
03-29 1114
querySelector()是javascript里面的一个方法，querySelector()方法返回文档中匹配指定CSS选择器的一个元素。 注意：querySelector()方法仅仅返回匹配指定选择器的第一个元素。 如果你需要返回所有的元素，请使用querySelectorAll()。 querySelector()遵循css选择符规范（选择符的命名规范）。
Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。...
weixin_34318956的博客
06-20 419
文章简介：querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。   querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。请看下面的例子： //获取body元素 var body = document.querySelector("bod...
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
CYK_byte的博客
11-04 1万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
JavaWeb-JavaScript API
最新发布
摸鱼胖嘟嘟的博客
02-10 995
一个HTML标签里，能写哪些属性，就同样可以通过JS中的DOM对象来获取一样的属性，可以通过console.dir这个方法，打印出一个dom对象的全部属性和值~在HTML中，表示类名的属性就是class，但是在JS里，属性名就变成了className/classList，class在JS中也是一个关键字。如果要修改的样式比较多，通过style就麻烦了，可以直接借助css类来修改。此处创建的节点，并没有挂在dom树上，因此浏览器页面中，是显示不出来的。一个页面的结构是一个树形结构, 称为 DOM 树.
javascript高级选择器querySelector和querySelectorAll全面解析
10-22
综上所述，`querySelector` 和 `querySelectorAll` 是非常强大的JavaScript DOM查询方法，它们支持几乎所有CSS选择器，可以广泛应用于各种复杂场景中。通过灵活使用这两个方法，开发者可以更高效地操作DOM，提高开发...
javascript之querySelector和querySelectorAll使用介绍
10-28
由于querySelector和querySelectorAll方法与jQuery选择器在语义上有相似之处，一些开发者可能会对这两个原生JavaScript方法的浏览器实现产生误解。例如，有些开发者可能会期待使用querySelectorAll返回的结果是可以...
javascript之querySelector和querySelectorAll使用说明
10-28
需要注意的是，虽然`querySelector`和`querySelectorAll`在大部分现代浏览器中都得到了支持，但在早期版本的Internet Explorer（如IE8）中，对CSS选择器的支持有限，仅限于CSS2.1的选择器。在不支持这些API的旧版...
JavaScript选择器函数querySelector和querySelectorAll
热门推荐
小天空的博客
07-13 5万+
选择器是非常强大的功能，早先一般是通过和来获取页面元素，在一些场景下就很不方便。后来DOM扩展出了标准，其中包含了和两个方法，可以通过Css选择器匹配页面元素。用于查询页面中第一个符合规则的元素，可以在实例和实例上调用，接收一个选择器字符串参数，如果查找到则返回 对象，否则返回。语法格式如下：123实例调用是获取整个页面匹配的元素。简单示例如下：12345678910111213141516171819202122232425实例调用是获取该元素子树内匹配的元素。简单示例：12345678910111213
JavaScript querySelector()、querySelectorAll()方法介绍
路虽远，行则必至！
06-26 4万+
一、getElementsByClassName()方法不足之处 在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。 在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法，这种方法在我们的实际开发中也很常用，因此我们要熟练掌握...
JavaScript の querySelector 使用说明
weixin_45566993的博客
04-22 9871
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 本文记录，JavaScript 中 querySelector 的使用方法。小白贡献，语失莫怪。 // 两种 query 的 method (方法) documen
javascript 选择器querySelector
javaSamBlog
03-18 335
javascript函数querySelector介绍 querySelector用于获得dom节点，可以接受三种类型的参数：id(#)，class(.)，标签。很像jquery的选择器。不过只能返回一个子孙元素，但是jquery选择器的话，可以返回一组元素集合。下面的代码示例： <body> <div id="query">i...
【CSS】querySelector选择器用法
NopDes1re的专栏
04-09 2300
Html：<ul class="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul class=&
奋斗30天Javascript之getElement* 和 querySelector*（Part14）
Super Livia
03-21 1000
跟著大漠先生學習《DOM系列：getElement* 和 querySelector*》一文： 原文:https://www.w3cplus.com/javascript/searching-elements-dom.html©w3cplus.com 跟著大漠先生學習的筆記和自己總結的一些東西。 今天來講getElement*和querySelector*: getElementBy...
JavaScript中选择器函数querySelector和querySelectorAll
晴空闲云
11-20 4583
选择器是Css非常强大的功能，早先一般是通过getElementById和getElementsByTagName来获取页面元素，在一些场景下就很不方便。 后来DOM扩展出了Selector API标准，其中 Selector API Level 1 包含了querySelector和querySelectorAll两个方法，可以通过Css选择器匹配页面元素。 querySelector查询单个元素 querySelector用于查询页面中第一个符合规则的元素，可以在Document实例和Element实例
document.querySelector()和document.querySelectorAll()用法
小妖666个人笔记
03-13 7588
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。而querySelectorAll() 则会返回匹配到的所有元素。 所以CSS 选择器支持的语法，querySelector() 都可以使用。下面例举了一些常用的用法： 实例：获取文档中第一个 <p> 元素 document.querySelector("p"); 实例：获取文档中 id="dem...
CSS与JavaScript选择器详解及其应用
**JavaScript选择器** 在JavaScript中，选择器同样用于操作DOM（文档对象模型）。常见的DOM选择器方法包括： 1. **getElementById()**：通过元素的ID获取特定元素，如`var element = document.getElementById("my-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值