getElementsByTagName和querySelectorAll的区别

最新推荐文章于 2024-05-03 11:55:44 发布
最新推荐文章于 2024-05-03 11:55:44 发布
阅读量378 收藏
点赞数
分类专栏： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BobChill/article/details/87905706
版权

两个都是javascript的原生方法。

getElementsByTagName方法返回的是HTMLCollection对象。

querySelectorAll方法返回的是NodeList对象。

         NodeList与HTMLCollection的区别可以参考下面的文章

         NodeList vs HTMLCollection

两个方法的区别有

  1. getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。
  2. getXXXByXXX更快。为什么
BobChill
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
querySelectorAll和getElementsByTagName获取元素的区别
BabyGod_Cheney的博客
04-06 303
querySelectorAll和getElementsByTagName获取元素的区别 1、document.querySelectorAll() 根据选择器获取所有匹配到的元素 返回的是NodeList，NodeList 不是一个数组，是一个类似数组的对象(Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 forEach() 来迭代。它有length...
getElementsBy系列方法和querySelectorAll方法
Meskjei的博客
03-18 3902
文章目录getElementsBy系列方法querySelectorAll方法 getElementsBy系列方法 getElementsByTagName() getElementsByClassName() getElementsByName() 这几个方法都是用来获取多个DOM对象的，只是通过不同的属性来查询。 而这三个方法里又属getElementsByName方法为特殊。因为只有它返...
querySelectorAll 和 getElementsByTagName区别
W3cplus
05-04 6448
在《DOM的操作》一节中知道querySelectorAll()和getElementsByTagName()两个方法都是用来查找DOM元素的。通过上一节的学习，知道qu...
JavaScript querySelectorAll()和getElementsByTagName的区别
m0_55201788的博客
01-13 412
querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。前者返回的是NodeList集合，后者返回的是HTMLCollection集合。。 NodeList对象是一个节点的集合，是由Node.childNodes和document.querySelectorAll()返回的。NodeList并不是都是静态的，Node.childNodes返回的是动态的元素集合； querySelectorAll() 返回的是一个静态集合。 HTMLCollectio
理解JavaScript DOM中querySelectorAll()和getElementsByTagName()区别
weixin_41461089的博客
10-21 165
querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。前者返回的是NodeList集合，后者返回的是HTMLCollection集合。其前者是一个静态集合，后者是一个动态集合。 其中动态集合和静态集合的最大区别在于：动态集合指的就是元素集合会随着DOM树元素的增加而增加，减少而减少；静态集合则不会受DOM树元素变化的影响。 使用getElementsByTagName方法我们得到的结果就像是一个对象的索引，而通过querySelectorAll方法我们得
querySelectorAll( )和getElementsByTagName( )
追随大神的脚步
05-11 946
一. 区别 querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。 前者返回的是NodeList集合，是一个静态集合 后者返回的是HTMLCollection集合，是一个动态集合 二. NodeList集合 / HTMLCollection集合 （1）NodeList集合是由Node.childNodes和document.querySelectorAll()返回的。 NodeList并不是都是静态的，也就是说Node.childNodes返回的是动态的
javascript高级选择器querySelector和querySelectorAll全面解析
10-22
以上三种方式都可以获取到同一个元素，区别在于它们的方法和返回值类型不同。 在使用这些选择器时，开发者还需要了解与之相关的其他JavaScript库或框架中的方法。比如，jQuery中的 `$(element).find(selector)` ...
javascript之querySelector和querySelectorAll使用说明
01-21
一开始很多人都会拿jquery的选择器来跟这两个api做对比（我也是），比较异同... global.body = doc.getElementsByTagName(‘body’)[0]; global.$ = function(id) { return doc.getElementById(id); } global.Logger =
javascript之querySelector和querySelectorAll使用介绍
01-19
一开始很多人都会拿jquery的选择器来跟这两个api做对比（我也是），比较异同本来...global.body = doc.getElementsByTagName('body')[0]; global.$ = function(id) { return doc.getElementById(id); } global.Logge
关于js中的querySelectorAll和getElementsByTagName方法的使用区别
weixin_37164418的博客
09-29 875
我是div5 添加元素 删除元素 我是ul3 我是li1 我是li2 我是li3 以上程序演示了 document.querySelectorAll("元素选择器类型")，返回的是一个NodeList NodeList的特点是：其里面的内容是静态不变的，不会随着dom元素的变化而改变。 document....
querySelectorAll与原生js getElementsByTagName的区别
weixin_44440256的博客
03-02 335
我们都知道两种方法都是用来找查找元素的,但两者有着细微的差异： 通过querySelectorAll得到的集合是静态的 而是用getElementsByClassName得到的是动态的集合，也 就是说每一次调用都会去对dom节点进行一次查询。 querySelectorAll()和getElementsByTagName()两个方法都是用来从DOM树中获取元素集合。如果简单的理...
querySelectorAll 和 getElementByTagName()等方法的区别
erciyuan_nuonuo的博客
01-03 2134
二者详细的使用方法不再做介绍，可以在w3c查阅二者返回的都是NodeList对象，querySelectorAll不是实时的，而getElementByTagName是实时的。实时： 假设在一个没有<div>的文档中调用getElementByTagName('div'),此时返回的是一个长度为0的NodeList对象，如果在文档中插入一个<div>元素，此元素将自动成为NodeList的一个成员
querySelectorAll 与 getElementsBy 的区别
ALSNEI的博客
01-13 2249
querySelectorAll 与 getElementsBy 的区别解析javascript 中获取元素有两个方法 querySelectorAll 与 getElementsBy ,但这两种方法却存在这细小的区别, 这个区别有时就会对我们所写的程序造成巨大的影响.前方高能:querySelectorAll 相比下面这些方法有什么区别？ ● getElementsByTagName
getElementById和querySelector区别
ayksy468284的博客
04-05 247
1.常见的获取元素的方法有3种，分别是通过元素ID document.getElementById('idName');、通过标签名字document.getElementsByTagName(tagName);和通过类名字document.getElementsByClassName('className');来获取。 2.querySelector(‘.className...
querySelectorAll与getElementsByTagName等区别
最新发布
qq_22936647的博客
05-03 191
querySelectorAll与getElementsByTagName等区别
querySelector 与 getElementById
doiido的专栏
10-24 3413
因此在浏览器中，querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象。NodeList 是一个静态的 NodeList 类型的对象。提示: 可使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后遍历所有元素，从而获取想要的信息；提示： 可使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。
JS 选择器querySelector系列和getElementById的区别
boonyaxnn的博客
04-08 3551
1、两者的W3C标准不同 querySelector系列属于W3C中的Selectors API(JS)规范 getElementsBy系列则属于 W3C的DOM 规范。 2、两者浏览器的兼容不同 getElementsBy系列基本能被所有浏览器支持。 querySelector系列则通常只有在考虑兼容性的时候才被提起(尽管两者功能近似) //IE7不支持 var ...
querySelectorAll()和getElementsByTagName()的区别
m0_61892085的博客
04-04 469
querySelectorAll()和getElementsByTagName()的区别
2022-05-15 获取节点:getElementsByTagName和querySelectorAll的异同
GAARA
05-15 248
知识点 节点对象的遍历,一般使用forEach 输出结果为NodeLIst才可以直接遍历 相同点 都是伪数组,只有长度和下标,不能使用数组方法,比如数组方法push()等等 不同点 getElementsByTagName获取的节点,console.log()输出的是(节点列表)NodeLIst(3)[li,li,li],需要通过Array.from转化成真数组才能进行节点遍历 querySelectorAll获取的节点,console.log()输出的是(节点集合)HTMLcollection(3)
querySelector和querySelectorAll
09-08
与getElementById和getElementsByTagName相比，query选择器选出的元素是静态的，而getElement方法选出的元素是动态的。静态意味着选出的所有元素的数量不会随着文档操作而改变。querySelector返回满足条件的第一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值