Html5中getElementsByClassName和querySelector的区别

最新推荐文章于 2023-10-20 16:01:41 发布
最新推荐文章于 2023-10-20 16:01:41 发布
阅读量384 收藏
点赞数
分类专栏： html5 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ixx_0/article/details/104965376
版权

两者都是 CSS 选择符，返回与该模式匹配的元素，区别如下

getElementsByClassName

1、参数可包含一或多个类名，类名的先后顺序不重要,类名前不加“.”

document.getElementsByClassName("username current");

2、返回带有指定类的所有元素的 NodeList，是动态查询的过程

querySelector

1、可查询标签、类、id等，参数只包含一个类名，且类名前需加“.”

document.querySelectorAll(".selected");

1、返回带有指定类的所有元素的 NodeList，一组元素的快照，而非不断对文档进行搜索的动态查询

Tony_FE
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript getElementsByClassName 和js取地址栏参数
10-29
为了从一大堆HTML代码中找出我们的树状菜单(也许有多个)，我们先来实现一个通过className找DOM节点的方法：getElementsByClassName。这是对浏览器自有DOM方法的一个简单但实用的扩充。
关于IE中getElementsByClassName不能用的问题解决方法
09-05
今天使用getElementsByClassName写了段小程序，在IE6、8中测试的时候就出现问题了，浏览器报错，经搜索找到了一个比较好的方法，是个老外写的一个方法
querySelector()和getelementsByClassName()的区别
丰柏林的博客
03-09 2181
在js里面querySelector()选择的标签是静态的 也就是说在选中之后，能够一直保存，也就是脱离了被选择的成为副本，除非是要保存选中的标签，否则不会轻易地使用querySelector()。 在js里面getelementsByClassName()选择的标签是动态的，所以是相互映射，在调用时，我们一般使用这种标签，因为可以及时的反映在页面上。 ...
getElementsByClassName()和querySelector()用法上的对比与联系
yuiop123455的博客
09-30 2757
这几天，我用js在写一个贪吃蛇的案列时，发现getElementsByClassName()和querySelector()这两个方法在用法上有一定的区别和联系，下面我将具体说一下： 一.getElementsByClassName() 首先，对于getElementsByClassName()方法来说， (1) 其返回值是一个伪数组（元素集合），是通过索引来访问数组中的每一个元素的。 (...
JS中选择DOM元素的方法集锦
aa110412的博客
03-18 268
各种选取元素的方法的速度，用原生的方法比jQuery要快差不多8倍，IE8是最慢的，IE9的速度差不多是IE8的3倍，Chrome的表现最好，其次是Firefox 选取文档元素的方法： 1、通过ID选取元素（getElementById） 1）使用方法：document.getElementById("domId") 其中，domId为要选取元素的id属性值...
getElementsByClassName 和querySelector简单区别
m0_45480496的博客
02-07 1320
getElementsByClassName 和querySelector简单区别 getElementsByClassName： （1）返回一个包含了所有指定类名的子元素的类数组对象，返回对象是动态的NodeList。 （2）getElementsByClassName()是HTML5 新增的DOM API（IE8以下不支持） (3) 对于现代浏览器开发，还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。 getElementsByClassName
关于querySelector 和 document.getElementsByTagName 选中集合问题
weixin_34248118的博客
09-11 256
本文解决的问题是 :运用for..of..循环时，edge浏览器报Object doesn't support property or method 'symbol.iterator'问题 以及 符号迭代器（symbol.interator）是什么类型的问题 在ES6中新加了一种数据类型Symbol,在es5中只有六种基本数据类型（undefined number null boolean str...
JS中getElementsByClassName与classList兼容性问题解决方案分析
10-16
主要介绍了JS中getElementsByClassName与classList兼容性问题解决方案,结合实例形式分析了getElementsByClassName与classList的使用方法、原理及兼容性问题的处理技巧,需要的朋友可以参考下
HTML5 3D卷纸表单填写动画特效.zip
07-11
var oWrap = document.getElementsByClassName('wrap')[0], oBox = document.getElementsByClassName('box'), oBtn1 = document.getElementById("btn1"), oShadow = document.getElementsByClassName("shadow...
js getElementsByClassName与querySelector querySelectorAll的区别
weixin_34074740的博客
11-06 169
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript基础（Dom查询的其他方法：body，documentElement，all，getElementsByClassName()，querySelectorAll()）（二十八）
余正源的博客
02-13 467
window.onload = function(){ //获取body标签 //var body = document.getElementsByTagName("body")[0]; //document.body可以用来获取页面中的body元素 var body = document.body; //docume
getElementById和querySelector方法的区别之处
jingru2017的博客
01-12 1290
区别1： getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。 简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。 先看看一个例子： 1 2 3 4 5 6 7 8 9 10 11 12 13
querySelectorAll和getElementsByClassName获取元素的区别
qq_44885374的博客
06-13 1159
querySelectorAll和getElementsByClassName获取元素的区别 querySelectorAll()方法是HTML5新增的方法，通过传入一个css选择符，返回所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例， getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为HTMLCollection对象。 HT...
【Javascript】【DOM】document.querySelector和document.getElementByClassName的区别
命运之手
05-23 3018
document.querySelector查询的是原始html网页中的元素 如果通过js代码添加了新的元素，通过document.querySelector是查询不到的，而document.getElementByClassName则可以查到 ...
javascript 中 document.getElementsByClassName 和 document.querySelector区别
qq_35987023的博客
10-20 561
都是 JavaScript 中常用于获取元素的方法，但它们之间有一些区别。，返回的都是动态的集合，当匹配的元素发生变化时，它们都会自动更新。只返回匹配的第一个元素，而不是返回一个列表。另外，需要注意的是，无论是。
querySelector和getElementsBy系列的区别
MaNqo的博客
09-30 606
querySelector系列和getElementsBy系列 之前在使用的时候，比较经常用getElementsById，这两个似乎可以混用，但是在有一些地方这两个的差别还是很大的，现在来整理一下。 querySelector 属于 W3C 中的 Selectors API 规范，接收的参数是一个css选择符。而 getElementsBy 系列则属于 W3C 的 DOM 规范 。 querySelector返回的都是NodeList对象（即文档节点的集合） getElementsBy系列返回的是H
querySelectorAll和getElementsByClassName的区别
CSDN_of_wmy的博客
06-13 1565
一、问题 在写表单验证时出现了一个问题 <div class="block"> <label for="username">账户：</label><input type="text" name="username" class="in"> <div class="er_wrap"> ...
querySelector与getElementBy等的区别
热门推荐
levinhax的博客
05-06 3万+
获取元素DOM对象有很多种方法，以前一直在用getElementById和getElementsByTagName等，现在对这些方法和querySelector做一个总结． 常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。 DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能
document.getElementsByClassName和document.querySelector的区别
最新发布
12-15
3.兼容性不同：document.getElementsByClassName是HTML5新增的DOM API，而document.querySelector是在CSS3中引入的选择器，但是两者都不支持IE8及以下版本。 以下是两个方法的使用示例： ```javascript // 使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值