getElementByXXX与querySelector的区别

最新推荐文章于 2025-05-28 19:34:53 发布

qq_44351588

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量174

点赞数

分类专栏： JS知识点文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_44351588/article/details/104111730

版权

JS知识点专栏收录该内容

2 篇文章

订阅专栏

本文介绍了三种常见的HTML元素查找方法：通过ID、标签名和类名查找元素，以及使用querySelector和querySelectorAll方法。这些方法帮助开发者高效地定位和操作网页中的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见的查找HTML元素的3种方式：

通过ID的方式查找
document.getElementByid(‘id名’)；
以对象的形式返回该元素，此时无法输出对象的长度，因其不是数组。
通过标签名的方式查找
document.getElementByTagName(‘标签名’)；
以集合的形式返回元素，可计算长度。
通过类名的方式查找
document.getElementByClassName(‘类名’)；

querySelector()方法返回匹配指定 CSS 选择器元素的第一个子元素。该方法只返回匹配指定选择器的第一个元素。
querySelectorAll() 方法返回所有匹配元素．

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_44351588

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

querySelector与getElementBy等的区别

weixin_33968104的博客

05-23

108

获取元素DOM对象有很多种方法，以前一直在用getElementById和getElementsByTagName等，现在对这些方法和querySelector做一个总结．常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能通...

querySelector 和 getElementsByTagName区别

chuidai7370的博客

12-19

1020

css + js 的一些小知识，本整理给自己巩固，有缘者观之，大牛绕道. document.getElementById('idName');通过元素id名, document.getElementByTagName('TagName');通过标签名.返回的是一个对象数组（准确的说是...

参与评论您还未登录，请先登录后发表或查看评论

getElementById和querySelector方法的区别

weixin_34104341的博客

09-20

120

1.getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。　　举例：　　 1 <ul> 2 <li>aaa</li> 3 <li>ddd</li> 4 <li>ccc</li> 5 </ul> 6 7 //d

querySelectorAll 和 getElementsByTagName区别

W3cplus

05-04

6699

在《DOM的操作》一节中知道querySelectorAll()和getElementsByTagName()两个方法都是用来查找DOM元素的。通过上一节的学习，知道qu...

[油猴脚本开发指南]脚本自动化之模拟点击和表单填写

热门推荐

李恒道的博客

01-23

1万+

转载自油猴中文网：bbs.tampermonkey.net.cn 李恒道QQ4548212 油猴中文网bbs.tampermonkey.net.cn TamperMonkey GreaseMonkey 油猴脚本脚本交流脚本分享油猴脚本开发油猴基础开发油猴油猴中文公众号:叛逆青年旅舍 https://bbs.tampermonkey.net.cn/ 本节主要内容: 首先将介绍模拟点击和表单填写的原理,然后使用脚本实现一个自动化登录论坛的功能模拟点击前端开发的同学应该都写过下面类似的代码,主

getElementsByTagName和querySelectorAll的区别

BobChill的博客

02-25

422

两个都是javascript的原生方法。 getElementsByTagName方法返回的是HTMLCollection对象。 querySelectorAll方法返回的是NodeList对象。 NodeList与HTMLCollection的区别可以参考下面的文章 NodeList vs HTMLCollection 两个方法的区别有 getXX...

javaScript---getElementBy与querySelector区别及querySelectorAll坑

maidu_xbd的博客

08-27

625

获取DOM元素的方法有：通过id获取---【document.getElementById("id");】通过类名---【document.getElementsByClassName("class")[0];】通过标签名---【 document.getElementsByTagName("标签名")[0];】通过name属性---【document.getElementsByName("name");】查询选择器---【document.querySelector("id/...

querySelectorAll( )和getElementsByTagName( )

追随大神的脚步

05-11

1010

一. 区别 querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值。前者返回的是NodeList集合，是一个静态集合后者返回的是HTMLCollection集合，是一个动态集合二. NodeList集合 / HTMLCollection集合（1）NodeList集合是由Node.childNodes和document.querySelectorAll()返回的。 NodeList并不是都是静态的，也就是说Node.childNodes返回的是动态的

原生 js 获取 dom 元素 querySelector() 替代 getElementById()

学习笔记

03-11

1698

原生 js 获取 dom 元素 querySelector() 替代 getElementById() 替代 getElementById() 很长一段时间以来，除了 jQuery 的选择器之外，我一直在用下面这几个方法获取 dom 元素 document.getElementById() document.getElementsByClassName() document.getElement...

getElementByTagName与querySelectorAll

weixin_43750811的博客

12-30

371

区别1 getElementByTagName：这种方式获取到的类数组，无法通过 forEach 进行遍历（可以通过for循环） querySelectorAll：可以通过forEach 进行遍历。区别2 通过 getElementByTagName 获取这种方式获取到的类数组是动态的；而 querySelectorAll 这种方式获取到的是静态的（但是如果是 querySelectorAl...

Bootstrap法进行随机模拟

最新发布

所念皆星河

05-28

255

本研究对26名神经功能受损儿童的空间知觉测试数据进行了分析。问题一采用Bootstrap方法计算A组与B组得分的皮尔逊相关系数，得到点估计0.821，95%置信区间为[0.662,0.913]。问题二以B组为因变量、A组为自变量建立一元线性回归模型，回归系数a的Bootstrap点估计为0.656，95%置信区间[0.49,0.847]，假设检验p值接近0，表明回归系数显著不为零。分析结果表明两组测试得分存在显著相关性和线性关系。

【Redis】三、在springboot中应用redis

naihe_fish的博客

05-22

1049

本文介绍了如何在Spring Boot项目中集成Redis作为缓存中间件，以优化用户信息管理的性能。首先，通过引入redis依赖，配置Redis连接信息。接着，创建了一个用户管理模块，包括数据库表、实体类、控制器和服务层。在服务层中，通过RedisTemplate实现了缓存逻辑，优先从Redis中查询用户分数，若未命中则从MySQL数据库中获取并缓存到Redis中。最后，通过Postman测试接口，验证了Redis缓存的有效性，首次查询较慢，但后续查询速度显著提升。

[特殊字符]使用 Hyperlane 实现 WebSocket广播

m0_52796585的博客

05-27

861

基于yjs实现协同编辑页面

qq_15509267的博客

05-26

955

协同编辑已成为现代Web应用的核心功能之一，它允许多用户实时协作，共同修改同一份文档或数据。然而，实现这一功能往往涉及复杂的冲突解决、状态同步和实时通信问题。Yjs作为一款高效的开源协同编辑框架，为开发者提供了简洁而强大的解决方案。它基于CRDT（无冲突复制数据类型）技术，确保数据一致性，同时支持与主流前端框架无缝集成。本文将介绍如何利用Yjs快速构建一个协同编辑页面，涵盖从基础原理到实际实现的完整流程。无论你是初次接触协同技术，还是希望优化现有系统，本文都能提供清晰的指引和实用的代码示例。

深入理解 JavaScript 中的 Async/Await：异步编程的终极解决方案

读心悦

05-27

1344

JavaScript异步编程从回调函数到Promise再到async/await不断演进。async/await作为Promise的语法糖，通过更直观的同步式语法处理异步操作，解决了回调地狱和错误处理难题。本文解析了async/await的基础语法、高级应用及最佳实践。基础部分介绍了async函数自动包装Promise的特性，await的等待机制以及try-catch错误处理。高级应用展示了如何用Promise.all并行执行异步操作，以及在条件语句和循环中的使用技巧。通过对比串行与并行执行的时间差异，凸显

uni-app学习笔记十四-vue3中emit的使用

shenxiaomo1688的博客

05-25

424

在组件传值中，无论是props还是slot都是单向数据流，父组件向子组件传值，子组件不能直接对父组件传过来的值进行重新赋值。在父组件中，onAdd接收子组件传递过来的随机数并转化为字符串进行截取，得到一个颜色的随机数。通过@add="onAdd"，其中add就是子组件的函数名。在实际开发中，emit通常需要在JS部分进行处理，上面的。子组件设置传递过去的函数名为add，值为一个随机数。下面学习子组件向父组件传值的工具--emit。在子组件emit设置传递的函数名和值。可以实现一样的效果。

《jQuery Mobile 网格：设计与实现详解》

csbysj2020

05-27

390

jQuery Mobile网格是一个基于12列的响应式布局系统，它将页面划分为12等份，每一份可以放置各种UI组件。通过合理地使用网格系统，可以快速实现灵活的布局效果。jQuery Mobile网格是一个强大的响应式布局工具，它可以帮助开发者快速构建灵活的移动端页面。通过本文的介绍，相信读者已经对jQuery Mobile网格有了更深入的了解。在实际应用中，结合项目需求，灵活运用网格系统，可以提升移动网页的开发效率与用户体验。

querySelectorAll与querySelector

04-23

querySelectorAll和querySelector都是JavaScript中用于选择DOM元素的方法。 querySelector是Document对象的方法，它接收一个CSS选择器作为参数，并返回匹配该选择器的第一个元素。如果没有匹配的元素，则返回null。...