Html5中getElementsByClassName和querySelector的区别

最新推荐文章于 2023-10-20 16:01:41 发布

Tony_FE

最新推荐文章于 2023-10-20 16:01:41 发布

阅读量411

点赞数

分类专栏： html5 文章标签： html javascript

本文链接：https://blog.csdn.net/ixx_0/article/details/104965376

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

getElementsByClassName

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

document.getElementsByClassName("username current");

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

querySelector

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

document.querySelectorAll(".selected");

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Tony_FE

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript中querySelector和getElementsBy系列的区别

debug_bug142的博客

09-24

querySelector和querySelectorAll可以使用CSS选择器从整个文档中选择元素，而getElementsByTagName和getElementsByClassName则通过标签名称和类名从指定范围内选择元素。此外，querySelector和querySelectorAll返回的是节点列表（NodeList），而getElementsByTagName和getElementsByClassName返回的是HTML集合（HTMLCollection）。

JS querySelector querySelectorAll getElementsByClassName getElementById innerText innerHTML

Kim的博客

08-14

337

<!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

1459

getElementsByClassName 和querySelector简单区别 getElementsByClassName：（1）返回一个包含了所有指定类名的子元素的类数组对象，返回对象是动态的NodeList。（2）getElementsByClassName()是HTML5 新增的DOM API（IE8以下不支持） (3) 对于现代浏览器开发，还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。 getElementsByClassName

querySelector()和getelementsByClassName()的区别

丰柏林的博客

03-09

2242

在js里面querySelector()选择的标签是静态的也就是说在选中之后，能够一直保存，也就是脱离了被选择的成为副本，除非是要保存选中的标签，否则不会轻易地使用querySelector()。在js里面getelementsByClassName()选择的标签是动态的，所以是相互映射，在调用时，我们一般使用这种标签，因为可以及时的反映在页面上。 ...

getElementsByClassName()和querySelector()用法上的对比与联系

yuiop123455的博客

09-30

2949

这几天，我用js在写一个贪吃蛇的案列时，发现getElementsByClassName()和querySelector()这两个方法在用法上有一定的区别和联系，下面我将具体说一下：一.getElementsByClassName() 首先，对于getElementsByClassName()方法来说， (1) 其返回值是一个伪数组（元素集合），是通过索引来访问数组中的每一个元素的。 (...

javascript 中 document.getElementsByClassName 和 document.querySelector区别

qq_35987023的博客

10-20

682

都是 JavaScript 中常用于获取元素的方法，但它们之间有一些区别。，返回的都是动态的集合，当匹配的元素发生变化时，它们都会自动更新。只返回匹配的第一个元素，而不是返回一个列表。另外，需要注意的是，无论是。

JS中选择DOM元素的方法集锦

aa110412的博客

03-18

291

各种选取元素的方法的速度，用原生的方法比jQuery要快差不多8倍，IE8是最慢的，IE9的速度差不多是IE8的3倍，Chrome的表现最好，其次是Firefox 选取文档元素的方法： 1、通过ID选取元素（getElementById） 1）使用方法：document.getElementById("domId") 其中，domId为要选取元素的id属性值...

document.getElementsByClassName和document.querySelector的区别

最新发布

12-15

3.兼容性不同：document.getElementsByClassName是HTML5新增的DOM API，而document.querySelector是在CSS3中引入的选择器，但是两者都不支持IE8及以下版本。以下是两个方法的使用示例： ```javascript // 使用...

各浏览器中querySelector和querySelectorAll的实现差异分析

09-05

`querySelector` 和 `querySelectorAll` 是W3C在DOM Level 3中引入的两个强大的选择器方法，它们极大地简化了在JavaScript中查找HTML元素的操作。这两个方法都接受一个符合CSS选择器语法的字符串作为参数。 1. `...

javascript高级选择器querySelector和querySelectorAll全面解析

10-22

其中，`querySelector` 和 `querySelectorAll` 是两个非常重要的方法，它们提供了比传统方法如 `getElementById` 和 `getElementsByClassName` 更强大和灵活的查询能力。这两个方法是 W3CSelectors API 规范中定义的...

关于querySelector 和 document.getElementsByTagName 选中集合问题

weixin_34248118的博客

09-11

272

本文解决的问题是 :运用for..of..循环时，edge浏览器报Object doesn't support property or method 'symbol.iterator'问题以及符号迭代器（symbol.interator）是什么类型的问题在ES6中新加了一种数据类型Symbol,在es5中只有六种基本数据类型（undefined number null boolean str...

js getElementsByClassName与querySelector querySelectorAll的区别

weixin_34074740的博客

11-06

196

2019独角兽企业重金招聘Python工程师标准>>> ...

javascript基础（Dom查询的其他方法：body，documentElement，all，getElementsByClassName()，querySelectorAll()）（二十八）

余正源的博客

02-13

504

window.onload = function(){ //获取body标签 //var body = document.getElementsByTagName("body")[0]; //document.body可以用来获取页面中的body元素 var body = document.body; //docume

getElementById和querySelector方法的区别之处

jingru2017的博客

01-12

1310

区别1： getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。先看看一个例子： 1 2 3 4 5 6 7 8 9 10 11 12 13

querySelectorAll和getElementsByClassName获取元素的区别

qq_44885374的博客

06-13

1241

querySelectorAll和getElementsByClassName获取元素的区别 querySelectorAll()方法是HTML5新增的方法，通过传入一个css选择符，返回所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例， getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为HTMLCollection对象。 HT...

getElement系列和querySelector系列区别

weixin_59418570的博客

04-08

693

方法接受一个作为参数，。方法与用法类似，区别是返回一个NodeList对象，方法返回一个类似数组的对象实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。方法id如果没有发现匹配的节点，则返回null。方法搜索 HTML 标签名，。它的返回值是一个类似数组对象实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集。方法用于选择拥有name属性的 HTML 元素（比如<form><radio><img><frame>

【Javascript】【DOM】document.querySelector和document.getElementByClassName的区别

天天向上 Up Up Up (*^▽^*)

05-23

3058

document.querySelector查询的是原始html网页中的元素如果通过js代码添加了新的元素，通过document.querySelector是查询不到的，而document.getElementByClassName则可以查到 ...

ocument.querySelectorAll和document.getElementByClassName的区别

qq_42931285的博客

03-20

571

当通过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 系列方法有什么区别？

08-12

971

1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]。 2. 浏览器兼容 querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持。 getElementsBy 系