querySelector()和querySelectorAll()的区别

最新推荐文章于 2023-09-01 00:22:20 发布
最新推荐文章于 2023-09-01 00:22:20 发布
阅读量364 收藏
点赞数
文章标签： js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45753871/article/details/109339808
版权

querySelector()和querySelectorAll()的区别

querySelector()

获取标签名/class名/id名的标签对象

语法:

document.querySelector("标签名/class名/id名)

注意

1:同时存在多个名称相同的时候取第一个
2:querySelector()可代替getElementById()、getElementsByClassName(、getElementsByTagName()
getElementsByName()
3:querySelector()根据某个标签名/class名/id名去查找的时候,没有找到,返回null

querySelectorAll()

获取名称相同的nodeList(节点集合)的数据

语法

doucument querySelectorAll("选择器")

注意:

1:有值的话返回的是nodeList的集合
2:没值的话返回的是空nodeL ist的集合
辰俊分享客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
querySelector()与querySelectorAll()的区别
zhou_xiao_cheng的博客
11-30 2万+
之前，在JavaScript获取文档元素一文中，我曾介绍了获取文档元素的几种方法，最后一种方法是通过选择器获取文档元素。它的核心思想便是利用`querySelector()`或`querySelectorAll()`方法，进而对文档元素进行获取操作，而这两种方法之间的区别，正是本文要讲述的内容。
querySelector和querySelectorAll
yangyang的专栏
04-07 1万+
它们俩是有区别的： 1.querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素（nodelist）； 2.在都没有满足条件的元素情况下：querySelector返回null，而querySelectorAll返回空的数组[]。 1.querySelector 返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹...
querySelector和querySelectorAll区别
aaa333qwe的博客
06-08 552
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。 区别点： 1、querySelector返回的是一个对象，querySel
querySelectorAll()与querySelector()
最新发布
qq_58159494的博客
09-01 899
我们可以看到let b它只获取了class为One的第一个元素 ,并没有获取到它的另一个class为One的元素，这也就是querySelector()它的返回值只是返回符合该选择器的第一个元素,并且我们获取的<a>标签它显示的是为null。querySelectorAll()与querySelector()都是用来获取DOM元素的，不同的是querySelectorAll()的返回值会返回符合该选择器的所有元素。(二) querySelectorAll()（一）querySelector()
js querySelector() 说明
sleep_i_like的博客
03-28 4166
js querySelector（）简单用法说明
再谈querySelector和querySelectorAll的区别与联系
09-05
`querySelector` 和 `querySelectorAll` 是在Web开发中用于选取HTML或XML文档中特定元素的JavaScript API，它们都基于CSS选择器。这两个方法都定义在DOM接口中，可以在任何支持这些方法的DOM节点上使用。 **...
javascript之querySelector和querySelectorAll使用说明
10-28
`querySelector` 和 `querySelectorAll` 是JavaScript中用于选取DOM元素的两个强大方法，它们都是在DOM元素或文档对象上可用的。这两个API在现代浏览器中得到了广泛支持，为开发者提供了便利的选择器操作。 首先，`...
javascript之querySelector和querySelectorAll使用介绍
10-28
其实关于querySelector和querySelectorAll的介绍说明很多。在此主要是做个记录
各浏览器中querySelector和querySelectorAll的实现差异分析
09-05
【querySelector和querySelectorAll详解】 `querySelector` 和 `querySelectorAll` 是W3C在DOM Level 3中引入的两个强大的选择器方法，它们极大地简化了在JavaScript中查找HTML元素的操作。这两个方法都接受一个...
querySelectorAll与querySelector的区别
大雷
07-17 2万+
querySelectorAll与querySelector的区别: querySelectorAll : 找出所有匹配的节点并返回数组. querySelector : 找到一个后就返回节点对象。 1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelis...
DOM简介和节点操作
twenj1616的博客
03-03 339
DOM简介 DOM(Document Object Model，文档对象模型) 是JavaScript 操作 HTML 文档的接口，使文档操作变得非常优雅、简便。 DOM最大的特点就是将文档表示为节点树。 nodeType 常用属性值 节点的 nodeType 属性可以显示这个节点具体的类型 nodeType值 节点类型 1 元素节点，例如<p> 和 <div> 3 文字节点 8 注释节点 9 document 节点 10 DTD 节点
爬虫配置必备：JQuery|querySelector|Cheerio DOM节点选择干货集
fbysss的专栏
01-31 6982
网页爬取，是一项既费脑子又繁琐的工作。因为网页格式不一，很难完全靠机器自动识别。 通常，我们可以采用css选择器来选取DOM节点，从整个网页中抽取我们需要的内容。 前端大家最熟悉的应该是JQuery了。如果JQuery不好用，可以直接使用原生的document.querySelectorAll，现在的浏览器大多也都支持了。 如果是Nodejs爬虫，一般采用cheerio模块（可以理解为后端的JQuery）来解析DOM。 cheerio虽然高仿JQuery，但还是有些差异，而且一些特性尚未实现。尽量更新到最新
querySelector选取元素不准的情况
ever_evil的博客
05-19 1376
首先先稍微讲一下情况，大概就是写爬虫时使用querySelector选取元素时发现选取结果与预期不符 比如如下的情况 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div> <div> </div> <div id='cont
C#一个简单的爬虫
gx_up
04-05 2438
写了一个小爬虫，把CSDN上发表的博客全都备份了下。 获取发表过的文章信息，存入到数据库。 C#中用 AngleSharp这个组件就可以像用linq一样就行html标签的查询操作。 所以从html里获取需要的内容是非常方便的 具体代码，随便写的： using AngleSharp.Parser.Html; using System; using System.Collections.G...
C#爬虫开发小结
dotNET跨平台
01-26 1386
1前言2023年以来一直很忙，临近春节，各种琐事更多，但鸽了太久没写文章总是不舒坦，忙中偷闲来记录下最近用C#写爬虫的一些笔记。爬虫一般都是用Python来写，生态丰富，动态语言开发速度快，调试也很方便但是我要说但是，动态语言也有其局限性，笔者作为老爬虫带师，几乎各种语言都搞过，现在这个任务并不复杂，用我最喜欢的C#做小菜一碟~2开始之前做 OneCat 项目的时候，最开始的数据采集模块，就是用 ...
如何获取页面元素：id，标签名，class，指定选择器querySelector，querySelectorAll，html，body
weixin_45673401的博客
02-07 9890
如何获取页面元素：id，标签名，class，指定选择器querySelector，querySelectorAll，html，body 第一种通过ID获取； 代码和注释如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id获取页面元素</tit...
document.querySelector()方法
热门推荐
qq_44885775的博客
04-26 6万+
javascript dom 查找匹配
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
CYK_byte的博客
11-04 1万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
querySelector与querySelectorAll区别及用法
weixin_41288457的博客
01-22 1万+
querySelector与querySelectorAll是H5提供的选择器，可用document.querySelector()选择元素操作节点， 用法与jQuery里的$()选择器类似,但有些细微区别: 1. querySelector只能选择第一个匹配的节点； 2. querySelectorAll可以选择多个节点,以","分隔开,返回的是个数组； 其他高级用法与jq基本一致,如后
querySelector和querySelectorAll的区别
07-17
querySelector和querySelectorAll都是DOM API中的方法，用于选择器来获取元素。 区别如下： 1. querySelector只返回匹配到的第一个元素（如果有多个匹配，只返回第一个），而querySelectorAll返回所有匹配到的元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值