queryselectorAll与getElementByClassName

原创 已于 2022-05-26 11:46:16 修改 · 327 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #js

于 2022-02-28 14:36:36 首次发布
本文探讨了在JavaScript中，当尝试使用forEach方法遍历HTMLCollection时遇到的问题。由于HTMLCollection不是真正的数组，它不直接支持数组方法。为了解决这个问题，我们介绍了如何转换HTMLCollection为Array，然后利用Array的forEach进行迭代操作，确保在处理DOM节点集合时的兼容性。

在这里插入图片描述
在这里插入图片描述
因为classname拿到的不是nodelist
他是HTMLcollection 他没有forEach方法

【JS】querySelectorAll和getElementsByClassName
owo_ovo的博客
04-15 427
【JS】querySelectorAll和getElementsByClassName
HTML学习笔记（5）
m0_70026215的博客
01-18 468
注:这里最后修改背景颜色调用的是this关键字，为什么不是arr[j].style.background="#"+color,首先后者一定是错的，在读取这个循环时，先给每个数组元素绑定了一个点击的函数，但是函数内部并没有执行，因为没有点击操作，只有绑定完之后，点击某一个元素，才开始执行对应元素的function内部的函数，所以当绑定完点击的函数后，每次点击j一定是数组长度+1，因为已经给每个元素都绑定完点击的效果了，this它指向函数执行时的当前对象。2、+延迟标记注：defer只能用在外引。
深挖querySelectorAll 和 getElementsByClassName的区别（涉及到HtmlCollection 和 NodeList）
weixin_44462233的博客
01-12 539
区别：不想深究为什么的可以看到这里就结束了； 1.getElemengByXXXX 不能使用 foreach, 但是querySelectorAll可以； 2.querySelectorAll返回NodeList; 而NodeList 是一个静态集合；(文档中的节点树 发生变化时除外) getElemengByXXXX 返回 HTMLCollection 是一直实时更新的； 代码如下： 根本原因在于querySelectAll 返回的是nodeList,是个节点的集合，是个类数组。 一般类数组有it
getElementsByclassName与querySelectorAll的对比
qq_39706777的博客
08-30 328
getElementByclassName与querySelectorAll的对比 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
querySelector和getElementsBy系列的区别
MaNqo的博客
09-30 749
querySelector系列和getElementsBy系列 之前在使用的时候，比较经常用getElementsById，这两个似乎可以混用，但是在有一些地方这两个的差别还是很大的，现在来整理一下。 querySelector 属于 W3C 中的 Selectors API 规范，接收的参数是一个css选择符。而 getElementsBy 系列则属于 W3C 的 DOM 规范 。 querySelector返回的都是NodeList对象（即文档节点的集合） getElementsBy系列返回的是H
querySelectorAll和getElementsByClassName获取元素的区别
qq_44885374的博客
06-13 1320
querySelectorAll和getElementsByClassName获取元素的区别 querySelectorAll()方法是HTML5新增的方法，通过传入一个css选择符，返回所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例， getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为HTMLCollection对象。 HT...
那使用document.getelementbyclassname呢
03-18
然后，用户可能对返回值类型不太清楚，应该说明返回的是实时集合，类似于getElementsByTagName，而不同于querySelectorAll返回的静态NodeList。这点很重要，因为如果DOM变化，HTMLCollection会动态更新，而NodeList...
JS中getelementbyclass和getelementbyclassname的区别
最新发布
07-05
与 `getElementsByClassName` 不同的是，它关注的是 `name` 属性而非类名。这在处理表单元素时特别有用，例如复选框、单选按钮等。 示例代码： ```javascript const elements = document.getElementsByName('...
提升jQuery效率：选择器与性能优化策略
- `class`选择器 (`$('.className')`) 在现代浏览器（Firefox、Safari、Chrome、Opera）中通过`getElementByClassName()`表现良好，但在旧版IE中较慢，因为缺少对应的方法。 3. **较慢选择器**： - 伪类选择器 (`...
getElementsByClassName Vs querySelectorAll
yesir_mao的博客
03-12 432
getElementsByClassName Vs querySelectorAll 注：转载请注明出处 代码片段如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
getElementsByClassName()和querySelector()用法上的对比与联系
yuiop123455的博客
09-30 3143
这几天，我用js在写一个贪吃蛇的案列时，发现getElementsByClassName()和querySelector()这两个方法在用法上有一定的区别和联系，下面我将具体说一下： 一.getElementsByClassName() 首先，对于getElementsByClassName()方法来说， (1) 其返回值是一个伪数组（元素集合），是通过索引来访问数组中的每一个元素的。 (...
ocument.querySelectorAll和document.getElementByClassName的区别
qq_42931285的博客
03-20 646
当通过js去改变DOM结构时： document.getElementByClassName会更新旧的查询结果，document.querySelectorAll则不会。 注：querySelectorAll（）的参数是一个css选择器。 <template> <div class="box"> <div class="zdy">1</div> <div class="zdy">2</div> <d.
querySelectorAll 方法相比 getElementsBy 系列方法区别
weixin_43964148的博客
07-07 222
最近有人问到querySelectorAll 方法相比 getElementsBy 系列方法区别，一时没想起来说些什么，今天查下文档，总结一下它们的区别，以便自己理解。1. W3C 标准...
querySelector，querySelectorAll与getElementByxxx
weixin_45974291的博客
12-28 331
querySelector(只能获取到一个，若没有返null) querySelectorAll(获取所有，若没有返[ ]) 通过querySelectorAll得到的集合是静态的，类似于一个快照，而是用getElementsByClassName得到的是动态的集合，也就是说每一次调用都会去对dom节点进行一次查询。 做个例子： var ul = document.getElementById('ul'); var lits = ul.getElementsByTagName('li') for(var i
querySelector()和getelementsByClassName()的区别
丰柏林的博客
03-09 2316
在js里面querySelector()选择的标签是静态的 也就是说在选中之后，能够一直保存，也就是脱离了被选择的成为副本，除非是要保存选中的标签，否则不会轻易地使用querySelector()。 在js里面getelementsByClassName()选择的标签是动态的，所以是相互映射，在调用时，我们一般使用这种标签，因为可以及时的反映在页面上。 ...
JS的querySelector 和 getElementBy* 方法族之间的差异
m0_50742275的博客
12-03 1235
【代码】JS的querySelector 和 getElementBy* 方法族之间的差异。
js的querySelector跟querySelectorAll
qq_36320160的博客
10-08 845
querySelector:document.querySelector('.className')------->可以选中.className的一个dom(注意只是一个) 　　　　　　　docume...
querySelector()与querySelectorAll()的区别
热门推荐
zhou_xiao_cheng的博客
11-30 2万+
之前，在JavaScript获取文档元素一文中，我曾介绍了获取文档元素的几种方法，最后一种方法是通过选择器获取文档元素。它的核心思想便是利用`querySelector()`或`querySelectorAll()`方法，进而对文档元素进行获取操作，而这两种方法之间的区别，正是本文要讲述的内容。
js，jquery原生实现select选择器
Mr_LoveJia的博客
01-08 825
总览一、效果图二、代码 今天遇到一个问题，就是用原生的select选择器的时候感觉“select选择器”样式很难修改，自带的样式不是很好看，所有就~~~哈哈哈，决定自己手写一个select选择器，这样对操作样式很方便啦。— —+ 废话不多说，上代码 一、效果图 *分割线------* *分割线------* 二、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值