JavaScript querySelector()、querySelectorAll()方法介绍

最新推荐文章于 2024-08-28 15:04:49 发布
最新推荐文章于 2024-08-28 15:04:49 发布
阅读量4.4w 收藏 86
点赞数 33
分类专栏： JavaScript 文章标签： getElementsByClassName() querySelector() querySelectorAll()
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44034384/article/details/93612152
版权

一、getElementsByClassName()方法不足之处

在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。

在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法，这种方法在我们的实际开发中也很常用，因此我们要熟练掌握并应用。
在这里插入图片描述

二、querySelector()、querySelectorAll()方法介绍

【1】document.querySelector()

  • 需要一个选择器的字符串作为参数，可以根据一个 CSS 选择器来查询一个元素节点对象
  • 虽然 IE8 中没有 getElementsByClassName()但是可以使用 document.querySelector()代替
  • 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

在这里插入图片描述
在这里插入图片描述
【2】document.querySelectorAll()

  • 该方法和 document.querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
  • 即使符合条件的元素只有一个，它也会返回数组

在这里插入图片描述
我们若要查找具体元素，就必须使用索引，如下图：
在这里插入图片描述

何极光
关注
专栏目录
【JS基础】querySelector()、querySelectorAll()--DOM方法
Milk~每天分享一点点，技术进步一点点
08-04 468
DOM querySelector() 方法 例子 获取文档中id="demo"的元素： document.querySelector("#demo"); 定义和用法 querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素 **参数：**CSS选择器 DOM querySelectorAll() 方法 例子 获取文档中class="example"的所有元素： var x = document.qu
JavaScript の querySelector 使用说明
weixin_45566993的博客
04-22 9881
🚀 优质资源分享 🚀 学习路线指引（点击解锁） 知识定位 人群定位 🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 本文记录，JavaScript 中 querySelector 的使用方法。小白贡献，语失莫怪。 // 两种 query 的 method (方法) documen
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
getElementById和querySelector的区别
m0_74386799的博客
07-27 623
和都是 JavaScript 中用于选择 DOM 元素的方法，但它们之间存在一些关键的区别。
JavaScript选择器函数querySelector和querySelectorAll
热门推荐
小天空的博客
07-13 5万+
选择器是非常强大的功能，早先一般是通过和来获取页面元素，在一些场景下就很不方便。后来DOM扩展出了标准，其中包含了和两个方法，可以通过Css选择器匹配页面元素。用于查询页面中第一个符合规则的元素，可以在实例和实例上调用，接收一个选择器字符串参数，如果查找到则返回 对象，否则返回。语法格式如下：123实例调用是获取整个页面匹配的元素。简单示例如下：12345678910111213141516171819202122232425实例调用是获取该元素子树内匹配的元素。简单示例：12345678910111213
JS中【querySelectorAll】详解
最新发布
2301_79858914的博客
08-28 941
是 JavaScript 中用于查找符合指定 CSS 选择器的DOM 元素的一个方法。与不同，返回的是一个的NodeList，包含文档中匹配选择器的所有元素。
JavaScript- DOM 原生 API 学习（querySelector，querySelectorAll，操作和修改表单属性，操作节点）
dodamce的博客
10-05 2455
对于在浏览器上运行JS程序，最核心的库就是DOM API 库DOM可以看作文档对象模型，HTML中会把每个html标签看作成一个JS中可操作的对象。操作这个对象，就可以影响界面的显示。其中获取网页元素是DOM的基础。当一个网页加载好后，会自动生成一个全局变量，叫做document，这其中有些方法和属性，让我们来操作网页内容。 在JS中的很多代码都是通过事件来触发。eg：鼠标点击页面，会产生鼠标点击事件等等。事件的三要素： 获取操作元素的内容 通过对象内的属性 innerHTML来实现。 需要注意，input
javascript之querySelector和querySelectorAll使用介绍
10-28
在Web开发中，JavaScript为操作DOM（文档对象模型）提供了许多API，其中包括querySelector和querySelectorAll这两个方法。这两个方法为开发者提供了查询DOM元素的能力，类似于jQuery所提供的选择器功能，但它们是...
javascript之querySelector和querySelectorAll使用说明
10-28
`querySelector` 和 `querySelectorAll` 是JavaScript中用于选取DOM元素的两个强大方法，它们都是在DOM元素或文档对象上可用的。这两个API在现代浏览器中得到了广泛支持，为开发者提供了便利的选择器操作。 首先，`...
HTML5中类jQuery选择器querySelector的使用
weixin_33975951的博客
06-22 278
简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。 用法 两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。 element = documen...
【JavaScript】基于querySelector / querySelectorAll对元素的操作，为你的DOM API基础扫盲~
CYK_byte的博客
11-04 1万+
浏览器提供的一个全局对象，类似于CSS中的选择器，可以精准的获取元素对象，这组API都来自于document下，document是浏览器提供的一个全局对象，表示当前页面DOM API基本都是documet对象的方法；
javascript基础学习系列五百三十三：querySelectorAll()
m0_68635815的博客
03-24 517
querySelectorAll()方法跟querySelector()一样，也接收一个用于查询的参数，但它会返回。以有效CSS 选择符调用querySelectorAll()都会返回NodeList，无论匹配多少个元素都可以。再强调一次，querySelectorAll()返回的NodeList 实例一个属性和方法都不缺，但它是一。个静态的“快照”，而非“实时”的查询。所有匹配的节点，而不止一个。这个方法返回的是一个NodeList 的静态实例。// 取得所有类名中包含"selected"的元素。
querySelectorAll（）
qq_42619304的博客
07-11 334
需要遍历
js的querySelector跟querySelectorAll
qq_36320160的博客
10-08 777
querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) 　　　　　　　docume...
js选择器：querySelector和querySelectorAll
QUX轻博客
09-08 1324
1.二者区别 querySelector是单一选择器，得到的是唯一的一个元素； querySelectorAll，得到的是一个数组，所有名为“*”的集合； ...
JavaScript中选择器函数querySelector和querySelectorAll
晴空闲云
11-20 4590
选择器是Css非常强大的功能，早先一般是通过getElementById和getElementsByTagName来获取页面元素，在一些场景下就很不方便。 后来DOM扩展出了Selector API标准，其中 Selector API Level 1 包含了querySelector和querySelectorAll两个方法，可以通过Css选择器匹配页面元素。 querySelector查询单个元素 querySelector用于查询页面中第一个符合规则的元素，可以在Document实例和Element实例
js中的document.querySelector()方法
withkai44的博客
11-29 1万+
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。位于元素之前，元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
querySelector 和 querySelectorAll
08-23
querySelector和querySelectorAll是HTML DOM（Document Object Model） API提供的两个用于选取文档中元素的方法。 1. `querySelector`：这个方法接收一个CSS选择器作为参数，返回匹配该选择器的第一个节点。如果找...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值