getElementsBy系列方法和querySelectorAll方法

最新推荐文章于 2024-01-04 17:37:30 发布
最新推荐文章于 2024-01-04 17:37:30 发布
阅读量3.9k 收藏 9
点赞数 1
分类专栏： 前端 JavaScript 文章标签： getElementsBy querySelectorAll DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjc256/article/details/88646996
版权
本文探讨了getElementsBy系列方法，包括getElementsByTagName、getElementsByClassName和getElementsByName，以及querySelectorAll方法。getElementsBy*系列返回动态集合，而querySelectorAll返回静态集合。文章通过实例展示了动态集合在元素变化时的实时更新，以及静态集合只返回查询时元素状态的特点。
摘要由CSDN通过智能技术生成

文章目录

getElementsBy系列方法

  • getElementsByTagName()
  • getElementsByClassName()
  • getElementsByName()

这几个方法都是用来获取多个DOM对象的，只是通过不同的属性来查询。

而这三个方法里又属getElementsByName方法为特殊。因为只有它返回的是NodeList，其他两个则都返回的是HTMLCollection。这两个的区别在我的另一篇笔记中有过描述。

虽然如此，getElementsByName()返回的NodeList与getElementsByTagName()和getElementsByClassName()返回的HTMLCollection都是动态(live)的。

所谓的动态，就是每一次访问集合都会经过一次查询，集合内元素的变化会动态体现在集合上。例如

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="
最低0.47元/天 解锁文章
Meskjei
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于获取DOM节点js方法document.querySelectorAll与常规获取的区别
majiang8823的博客
11-10 2217
document.querySelectorAll与常规获取的区别一、document.querySelectorAll获取节点方法二、常规获取DOM节点方法2.分析区别总结 <!--body里面的代码--> <ul> <li>洪山区</li> <li id="wuchang">武昌区</li> <li>汉阳区</li>
document.getElementsByName()的用法
12-29
详细介绍并对比了document.getElementsByName()和document.getElementByNId()的用法，并进行了深入的比较，还有例子加以讲解说明。
querySelectorAll 与 getElementsBy 的区别
ALSNEI的博客
01-13 2243
querySelectorAll 与 getElementsBy 的区别解析javascript 中获取元素有两个方法 querySelectorAll 与 getElementsBy ,但这两种方法却存在这细小的区别, 这个区别有时就会对我们所写的程序造成巨大的影响.前方高能:querySelectorAll 相比下面这些方法有什么区别？ ● getElementsByTagName
【兼容封装】选择器getElementById || getElementsByClassName（兼容IE） || getElementsByTagName
Umbrella_Um的博客
07-25 321
封装 – 原生js选择器 /* 封装一个选择器 */ function seletor(param, obj) { obj = obj || document; //根据id名查找元素 if (param[0] === "#") // console.log("param",param.charAt(0)) ...
getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别
CQ_engineer的博客
11-24 544
1. getElementById() getElementsByTagName()  javascript原生的方法，这两个不会有兼容性问题。 2. getElementsByClassName()是HTML5的DOM API ，IE8以下不支持（不支持HTML5的浏览器）。 对于现代浏览器，document.getElementsByClassName( 'wrap ' )获取的是DOM中
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
热门推荐
weixin_46065214的博客
08-17 1万+
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
document.getElementsByName() 兼容
ck11926375的专栏
01-18 910
var getElementsByName = function(tag, name){var returns = document.getElementsByName(name);if(returns.length > 0) return returns;returns = new Array();
getElementsBy有哪些定位方式
05-26
`getElementsBy`是JavaScript中DOM元素的方法，用于通过不同的方式定位到指定的元素，常用的定位方式有以下几种： 1. `getElementsByClassName()`：通过class名称获取元素。 2. `getElementsByTagName()`：通过标签...
js知识点比较 数组方法 jQuery
冠日的个人博客
05-25 524
常用的字符串方法 https://www.cnblogs.com/blogcxz/archive/2019/06/27/11100033.html 1.charAt() 获取字符串中特定索引处的字符；stringObject.charAt(index) 2.toupperCase() toLowerCase() 将字符串的所有字符转换...
原生JS对DOM节点的获取和增删改
dengbi1163的博客
09-03 1039
一、原生JS获取DOM节点 获取节点的方式大致分querySelector系列和getElementsBy 系列，两种：querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。 querySelector 系列接收的参数是一个 CSS 选择符。而 getElement...
getElementBy区别和总结
不知所谓
06-01 3372
getElementByID ，     getElementsByName ，     getElementsByTagName的区别和总结          WEB标准下可以通过getElementById()，getElementsByName() and getElementsByTagName()访问DOCUMENT中的任一个标签：1、getElementById()     get
js中获取元素的方法（document和getElementById）
最新发布
2303_76379956的博客
01-04 1337
定义： getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。提示： 可使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。元素在集合中的顺序以其在代码中的出现次序排序。定义： getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。定义： getElementsByTagName() 方法可返回带有指定标签名的对象的集合；
getElementById(), getElementsByName()和 getElementsByTagName() 详解
starwind_的博客
07-31 3955
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签： 1、getElementById() getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。 比如说有一个DIV的ID
etElementByID getElementsByName getElementsByTagName的区别和总结
Xw_Andy的专栏
10-27 798
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签：1、getElementById()getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。比如说有一个DIV的ID为docid
getElementsBy和querySelectorAll区别
shenzhongkang的博客
05-27 857
    不论是querySelectorAll还是getElementsByTagName/getElementsByClassName/getElementsByName都是在编写JavaScript脚本的时候获取dom节点列表常见的操作。那么querySelectorAll相比get系列的方法有什么区别呢？    1、W3C标准        querySelectorAll 属于W3C中的S...
querySelector和getElementsBy系列的区别
MaNqo的博客
09-30 648
querySelector系列和getElementsBy系列 之前在使用的时候，比较经常用getElementsById，这两个似乎可以混用，但是在有一些地方这两个的差别还是很大的，现在来整理一下。 querySelector 属于 W3C 中的 Selectors API 规范，接收的参数是一个css选择符。而 getElementsBy 系列则属于 W3C 的 DOM 规范 。 querySelector返回的都是NodeList对象（即文档节点的集合） getElementsBy系列返回的是H
getElementByID getElementsByName getElementsByTagName的区别和总结
aureate820的专栏
11-04 681
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签：1、getElementById()getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。比如说有一个DIV的ID为docid
getElementById()，getElementsByName()，getElementsByTagName的用法和区别
mylove20041109的专栏
10-22 455
1、定义：         getElementById(id)，以id标识符取得对象，是一个对象;         getElementsByName(name)，以name取得节点清单，是一个数组集合;         getElementsByTagName(tagname)，返回带有指定标签名的对象的集合. 2、一个文件中id是唯一的，但是name可以重名(比如radio)，  所...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值