querySelector()和getelementsByClassName()的区别

最新推荐文章于 2025-06-16 18:39:32 发布
最新推荐文章于 2025-06-16 18:39:32 发布
阅读量2.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js前端 文章标签： querySelector()和getelementsByClassN
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40647912/article/details/88372858
本文详细探讨了JavaScript中querySelector()和getElementsByClassName()的区别。前者选择的元素是静态的，一旦选择即成为副本，适用于不需要实时更新的选择场景；后者则为动态选择，实时映射页面元素，适合需要即时反映页面变化的场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在js里面querySelector()选择的标签是静态的
也就是说在选中之后，能够一直保存，也就是脱离了被选择的成为副本，除非是要保存选中的标签，否则不会轻易地使用querySelector()。

在js里面getelementsByClassName()选择的标签是动态的，所以是相互映射，在调用时，我们一般使用这种标签，因为可以及时的反映在页面上。

JS querySelector querySelectorAll getElementsByClassName getElementById innerText innerHTML
Kim的博客
08-14 386
<!DOCTYPE html> <html> <head> <title>Welcome to nginx!</title> <style> body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; } </style> <script ty.
getElementsByClassName 和querySelector简单区别
m0_45480496的博客
02-07 1606
getElementsByClassName 和querySelector简单区别 getElementsByClassName： （1）返回一个包含了所有指定类名的子元素的类数组对象，返回对象是动态的NodeList。 （2）getElementsByClassName()是HTML5 新增的DOM API（IE8以下不支持） (3) 对于现代浏览器开发，还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。 getElementsByClassName
getElementsByClassName()和querySelector()用法上的对比与联系
yuiop123455的博客
09-30 3121
这几天，我用js在写一个贪吃蛇的案列时，发现getElementsByClassName()和querySelector()这两个方法在用法上有一定的区别和联系，下面我将具体说一下： 一.getElementsByClassName() 首先，对于getElementsByClassName()方法来说， (1) 其返回值是一个伪数组（元素集合），是通过索引来访问数组中的每一个元素的。 (...
JavaScript中querySelector用法详解
最新发布
BillKu的博客
06-16 902
在 JavaScript 中，是用于在 DOM 中查找匹配指定 CSS 选择器的的方法。它非常灵活且强大，支持所有 CSS 选择器语法。
javascript 中 document.getElementsByClassName 和 document.querySelector区别
qq_35987023的博客
10-20 792
都是 JavaScript 中常用于获取元素的方法，但它们之间有一些区别。，返回的都是动态的集合，当匹配的元素发生变化时，它们都会自动更新。只返回匹配的第一个元素，而不是返回一个列表。另外，需要注意的是，无论是。
Html5中getElementsByClassName和querySelector的区别
ixx_0的博客
03-19 443
两者都是 CSS 选择符，返回与该模式匹配的元素，区别如下 getElementsByClassName 1、参数可包含一或多个类名，类名的先后顺序不重要,类名前不加“.” document.getElementsByClassName("username current"); 2、返回带有指定类的所有元素的 NodeList，是动态查询的过程 querySelector 1、可查询标签、类、i...
querySelectorAll和getElementsByClassName获取元素的区别
weixin_30399797的博客
04-30 366
querySelectorAll()方法是HTML5新增的方法，通过传入一个css选择符，返回所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。那么它和通过getElementsByClassName等获取元素有什么区别？ 最大的区别就是querySelectorAll的实现类似于一组元素的快照，而并非对文档结构进行搜索的动态查询。所谓快照就是把某个时刻dom中的结构...
querySelector与getElementsByClassName区别
04-15
### querySelector 和 getElementsByClassName 的主要区别 #### 返回值类型 `querySelector` 方法返回的是第一个匹配指定 CSS 选择器的单个元素节点，而 `getElementsByClassName` 则返回一个动态的 NodeList，其中...
querySelector与getElementsByClassName的区别
04-15
### querySelector与getElementsByClassName的区别 `querySelector` 和 `getElementsByClassName` 是 JavaScript 中用于操作 DOM 的两种方法，它们的功能虽然有重叠部分，但在实际应用中有显著的不同。 #### ...
querySelector与getElementsByClassName执行顺序的区别
04-15
`querySelector` 和 `getElementsByClassName` 是用于获取 DOM 元素的两种不同方法，它们在功能上有一些相似之处，但在实现方式和返回结果上有显著的区别。 #### 返回值类型的不同 - **querySelector**: 这种方法...
js getElementsByClassName与querySelector querySelectorAll的区别
weixin_34074740的博客
11-06 219
2019独角兽企业重金招聘Python工程师标准>>> ...
queryselectorAll与getElementByClassName
HTML5_student的博客
02-28 302
因为classname拿到的不是nodelist 他是HTMLcollection 他没有forEach方法
querySelector与getElementsById的区别
2301_76833363的博客
09-16 410
2、参数的传递方式不同，querySelector接收的是CSS选择符，与CSS的选择符规范一致，而getElementsByIds只能接收单一的选择器名称，这会导致在写代码时getElementsByIds会造成代码冗余，需用多条代码连着写，而querySelector则用一条代码，把所需的选择符逐一带入参数中即可。querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 支持；
javascript基础（Dom查询的其他方法：body，documentElement，all，getElementsByClassName()，querySelectorAll()）（二十八）
余正源的博客
02-13 540
window.onload = function(){ //获取body标签 //var body = document.getElementsByTagName("body")[0]; //document.body可以用来获取页面中的body元素 var body = document.body; //docume
querySelector 与 getElementById
doiido的专栏
10-24 5399
因此在浏览器中，querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象。NodeList 是一个静态的 NodeList 类型的对象。提示: 可使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后遍历所有元素，从而获取想要的信息；提示： 可使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。
querySelector与getElementBy等的区别
qq_42239440的博客
07-13 1194
1.获取元素DOM对象有很多种方法，以前一直在用getElementById和getElementsByTagName等，现在对这些方法和querySelector做一个总结． 2.常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。 3.DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能通过其来调用该方法，使用方法如下:document.getElemen...
getElementById和querySelector方法的区别之处
jingru2017的博客
01-12 1339
区别1： getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。 简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。 先看看一个例子： 1 2 3 4 5 6 7 8 9 10 11 12 13
JS的querySelector 和 getElementBy* 方法族之间的差异
m0_50742275的博客
12-03 1118
【代码】JS的querySelector 和 getElementBy* 方法族之间的差异。
getElement系列和querySelector系列区别
weixin_59418570的博客
04-08 761
方法接受一个作为参数，。方法与用法类似，区别是返回一个NodeList对象，方法返回一个类似数组的对象实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。方法id如果没有发现匹配的节点，则返回null。方法搜索 HTML 标签名，。它的返回值是一个类似数组对象实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。方法用于选择拥有name属性的 HTML 元素（比如<form><radio><img><frame>
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值