浅谈JavaScript高级选择器querySelector和querySelectorAll

最新推荐文章于 2021-10-09 21:04:22 发布
最新推荐文章于 2021-10-09 21:04:22 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： JavaScript 高级选择器 querySelector querySelectorAll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouziyu2011/article/details/70696906
版权
本文探讨了JavaScript中的querySelector和querySelectorAll方法，它们遵循CSS选择器规范，用于高效定位文档元素。querySelector返回单个对象，querySelectorAll返回元素集合。两者分别属于Selectors API和DOM规范，广泛支持于现代浏览器。querySelector系列接受CSS选择符，返回静态NodeList，而getElementBy系列则针对单一属性。此外，HTMLCollection和NodeList虽为动态元素集合，但HTMLCollection仅包含Element节点，而NodeList包含所有节点类型。
摘要由CSDN通过智能技术生成

querySelector和querySelectorAll根据CSS选择器规范，便捷定位文档中指定元素，主流浏览器均支持：包括IE8+、Firefox、Chrome

最低0.47元/天 解锁文章
筱葭
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 querySelector() 使用方法
10-20
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代
javascript之querySelector和querySelectorAll使用说明
10-28
其实关于querySelector和querySelectorAll的介绍说明很多,在此主要是做个记录
【HTML5与CSS3基础】选择器querySelector和querySelectorAll
zgljl2012的专栏
03-23 1547
HTML5提供了两个类似JQuery的查找元素的选择器函数：querySelector和querySelectorAll，前者查找元素然后返回第一个，而后者查找元素后返回一个NodeList，里面包含了所有符合选择器的元素。 使用方法： var buttons = document.querySelectorAll(“.menu a”); 上述语句查找了类为menu且标签为a的元素，形成了一个
querySelector()方法和querySelectorAll()方法
EchoLiner的博客
08-08 623
⚠️querySelector()方法接收一个css选择符，返回与该模式匹配的第一个元素 ⚠️querySelectorAll()方法接收一个css选择符，返回与该模式匹配的所有元素 ???? 举例： 在html写5个class都为test的div标签： <div class="test">11</div> <div class="test">22</div> <div class="test">33</div> &l.
再谈querySelector和querySelectorAll的区别与联系
09-05
`querySelector` 和 `querySelectorAll` 是在Web开发中用于选取HTML或XML文档中特定元素的JavaScript API，它们都基于CSS选择器。这两个方法都定义在DOM接口中，可以在任何支持这些方法的DOM节点上使用。 **...
DOM:超强的选择标签方法 querySelector 和 querySelectorAll
九天翔龙的技术博客
03-28 4110
今天听课，看到上课的朋友在用querySelector和 querySelectorAll 。以前知道它们，但是用的很少。看朋友的写法很新奇，随整理下笔记，备忘。 个人觉得querySelector 和 querySelectorAll 是DOM中超强的选择标签的方式，因为他们接受的参数是类CSS选择符的字符串。因此，感觉它们的功能远超传统的getElementById或者getEleme...
querySelectorAll方法趣题
guoxiaozhuang4的博客
04-24 220
1. 题目：点击一个列表，输出对应的索引2.  实现&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&a
JavaScript querySelector()、querySelectorAll()方法介绍
热门推荐
路虽远，行则必至！
06-26 4万+
一、getElementsByClassName()方法不足之处 在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。 在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法，这种方法在我们的实际开发中也很常用，因此我们要熟练掌握...
Playwright自动化测试工具之元素定位实战
测试帮日记
03-30 9894
1. 元素定位 官方文档： https://playwright.dev/python/docs/api/class-elementhandle/#element_handleis_visible 3.1 元素定位 元素定位是元素交互的前提条件，也是自动化测试最重要的步骤之一。元素” 存在 “页面”中 ，要定位元素，就是调用“页面”的方法: l querySelector(engine=body) # 选择单个元素 l querySelectorAll(engine=body) # 选择多个元素
querySelector() 方法
weixin_34396902的博客
03-31 3万+
返回文档中匹配指定 CSS 选择器的一个元素。 虽然IE8中没有getElementsByClassName()但可以用querySelector()代替 注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 querySelector 获取文档中 class="example" ...
css选择器querySelectorAll
weixin_30823683的博客
03-29 300
* querySelectorAll(css的选择器)* 通过css的选择器获取到的一组元素* 获取的也是类数组** 主语* document 从整个页面去获取一组元素* 父级 从父级下去获取一组元素 <!DOCTYPE html> <html lang="en"> <head> &lt...
Web元素定位之CSS Selector
义甬君的技术博客
02-28 1万+
XPath与CSS Selector的差别上一篇文章中总结了web自动化测试中用xpath来进行元素定位的方法，那么CSS Selector又是什么鬼？ 其实，对于使用者来讲，哪个用的习惯就选哪个。总的来说，XPath更强大，而CSS选择器通常语法比较简洁，运行速度更快些。 Target CSS 3 XPath 所有元素 * //* 所有的P元素 p //p
JavaScript高级选择器querySelector和querySelectorAll
梦颖飞燕--博客
08-23 464
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 querySelector和querySelectorAll的参数须
getElementById和querySelector方法的区别之处
jingru2017的博客
01-12 1294
区别1： getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。 简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。 先看看一个例子： 1 2 3 4 5 6 7 8 9 10 11 12 13
【JAVASCRIPT】querySelector获取一个元素以及获取多个元素方法
IU
10-09 7079
定义 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 在菜鸟中有这样一句话 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 如下: 获取到li元素的集合 <ul id="list"> <li>1</li> <li>1</li>
Phantomjs+Nodejs+Mysql数据抓取（1.数据抓取）
JokerKon的博客
03-13 4099
概要： 这篇博文主要讲一下如何使用Phantomjs进行数据抓取，这里面抓的网站是太平洋电脑网估价的内容。主要是对电脑笔记本以及他们的属性进行抓取，然后在使用nodejs进行下载图片和插入数据库操作。
爬虫配置必备：JQuery|querySelector|Cheerio DOM节点选择干货集
fbysss的专栏
01-31 6984
网页爬取，是一项既费脑子又繁琐的工作。因为网页格式不一，很难完全靠机器自动识别。 通常，我们可以采用css选择器来选取DOM节点，从整个网页中抽取我们需要的内容。 前端大家最熟悉的应该是JQuery了。如果JQuery不好用，可以直接使用原生的document.querySelectorAll，现在的浏览器大多也都支持了。 如果是Nodejs爬虫，一般采用cheerio模块（可以理解为后端的JQuery）来解析DOM。 cheerio虽然高仿JQuery，但还是有些差异，而且一些特性尚未实现。尽量更新到最新
querySelector 和 querySelectorAll 什么意思
最新发布
01-21
querySelector和querySelectorAll是JavaScript中的两个DOM选择器方法。 1. querySelector方法用于选择满足条件的第一个元素（node）。如果没有满足条件的元素，则返回null。 2. querySelectorAll方法用于选择满足...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值