querySelector和getElementById的区别

最新推荐文章于 2024-07-27 16:17:17 发布
最新推荐文章于 2024-07-27 16:17:17 发布
阅读量287 收藏
点赞数
文章标签： javascript 前端 css3 node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Marveltonny/article/details/124733647
版权
本文探讨了querySelector和getElementById两个DOM选择方法在选取元素时的动态与静态差异。querySelector返回的是静态结果，不会随文档变化更新，而getElementById则返回动态集合，能反映出文档的实时状态。了解这些差异对于优化网页脚本和处理动态内容至关重要。
摘要由CSDN通过智能技术生成

querySelector：选出来的是静态的，后面如果有增加的是不会显示出来的

返回指定选择器的第一个元素对象，里面选择器需要加符号 eg：.box/#box

getElementById：选出来的是动态的 ，返回的是对象的集合，以数组的形式储存，如果获取不到元素，会返回空的伪数组。

 

动态就是选出的元素会随文档改变而改变，而静态的选出来之后就不会改变了

Savannah57
关注
奋斗30天Javascript之getElement* 和 querySelector*（Part14）
Super Livia
03-21 1002
跟著大漠先生學習《DOM系列：getElement* 和 querySelector*》一文： 原文:https://www.w3cplus.com/javascript/searching-elements-dom.html©w3cplus.com 跟著大漠先生學習的筆記和自己總結的一些東西。 今天來講getElement*和querySelector*: getElementBy...
js querySelector和getElementById通过id获取元素的区别
10-28
在JavaScript中，获取页面元素有多种方法，其中最为常见的两种是通过`document.getElementById`和`document.querySelector`。这两个方法虽然都可以用于根据元素的ID来获取页面上的元素，但它们之间存在一些关键的...
getElementById和querySelector区别
ayksy468284的博客
04-05 247
1.常见的获取元素的方法有3种，分别是通过元素ID document.getElementById('idName');、通过标签名字document.getElementsByTagName(tagName);和通过类名字document.getElementsByClassName('className');来获取。 2.querySelector(‘.className...
getElementById和querySelector的区别
最新发布
m0_74386799的博客
07-27 628
和都是 JavaScript 中用于选择 DOM 元素的方法，但它们之间存在一些关键的区别。
querySelector和getElementById方法的区别
baocuan8515的博客
07-24 985
一、querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二、与 getElementBy 的区别 这两个新添加的 API 与 getElementById() / getElementsByTagName() 有什么区别呢？ 举个例子：...
querySelector与getElementBy等的区别
weixin_33968104的博客
05-23 83
获取元素DOM对象有很多种方法，以前一直在用getElementById和getElementsByTagName等，现在对这些方法和querySelector做一个总结．常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能通...
querySelector和getElementById之间的区别
dengling4813的博客
05-23 341
一、概述 　　今天在看js的时候发现里面的代码基本上都是用querySelector()和querySelectorAll()来获取元素，就有点疑惑为什么不用getElementById(),可能也是因为自己没用过那两个，所以并不清楚原因所在。 　　参考手册上写querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素，并且其语法document.querySe...
querySelector 与 getElementById 方法的区别
09-19
querySelector和getElementById都是用来获取元素的方法，但它们有一些区别。 querySelector是通过使用CSS选择器来选择元素的。你可以使用类名、标签名、属性等等来选择元素。它返回匹配选择器的第一个元素。 而...
document.getElementById和document.querySelector有什么区别
05-07
document.getElementById和document.querySelector都是JavaScript中用于DOM操作的方法，但它们有以下区别： 1. 返回值不同：document.getElementById返回的是一个元素对象，而document.querySelector返回的是一个...
javascript高级选择器querySelector和querySelectorAll全面解析
10-22
其中，`querySelector` 和 `querySelectorAll` 是两个非常重要的方法，它们提供了比传统方法如 `getElementById` 和 `getElementsByClassName` 更强大和灵活的查询能力。这两个方法是 W3CSelectors API 规范中定义的...
getElementById和querySelector方法的区别
苏苏就是小苏苏的博客
06-11 1904
1.querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 2.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 3.区别 getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。 简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后
querySelector 与 getElementById
doiido的专栏
10-24 3427
因此在浏览器中，querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象。NodeList 是一个静态的 NodeList 类型的对象。提示: 可使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后遍历所有元素，从而获取想要的信息；提示： 可使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。
querySelector与getElementsById的区别
2301_76833363的博客
09-16 299
2、参数的传递方式不同，querySelector接收的是CSS选择符，与CSS的选择符规范一致，而getElementsByIds只能接收单一的选择器名称，这会导致在写代码时getElementsByIds会造成代码冗余，需用多条代码连着写，而querySelector则用一条代码，把所需的选择符逐一带入参数中即可。querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 支持；
getElementById与querySelector的区别
从入门到放弃_nys的博客
10-09 3656
getElementById与querySelector的区别 首先对获取元素的几个方法有所了解 getElementById()：返回对拥有指定id的第一个对象的引用 getElementsByName()：返回带有指定名称name的对象的集合。返回的是元素的数组，而不是一个元素（由于name不唯一） getElementsByTagName()：返回带有指定标签名的对象集合 query...
比较querySelector 与 getElementById
allway2的博客
10-10 524
querySelector 与 getElementById：比较 詹姆斯·加拉格尔 2020 年 10 月 5 日 querySelector 和 getElementById 方法都允许您从JavaScript 文档对象模型 (DOM)检索元素。但是，每种方法都有自己的用例。 在本指南中，我们分解了 querySelector 和 getElementById 的最常见用例。我们还比较了这两种方法，并通过一个基本示例引导您了解每种方法的工作原理。 什么是查询选择器？ 在J
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值