js querySelector和getElementByXXX 获取元素的区别

最新推荐文章于 2023-11-29 08:47:53 发布
最新推荐文章于 2023-11-29 08:47:53 发布
阅读量319 收藏 1
点赞数
原文链接：http://www.cnblogs.com/xiaoyaoweb/p/8665190.html
版权

js的querySelector获取的是静态的集合（取到和文档更改没关系了）   获取的是第一个(并不是集合)
getElementBy 获取的是集合

querySelector和querySelectorAll() 

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

总结

 

如果只要一次查找就可得到元素时，首选getXXXByXXX ；

如果需要经过多级查找，才能得到元素时，首选querySelector；

 

转载于:https://www.cnblogs.com/xiaoyaoweb/p/8665190.html

weixin_30698527
关注
奋斗30天Javascript之getElement* 和 querySelector*（Part14）
Super Livia
03-21 1005
跟著大漠先生學習《DOM系列：getElement* 和 querySelector*》一文： 原文:https://www.w3cplus.com/javascript/searching-elements-dom.html©w3cplus.com 跟著大漠先生學習的筆記和自己總結的一些東西。 今天來講getElement*和querySelector*: getElementBy...
query获取整个节点html,JavaScript中querySelector()获取HTML元素的方法介绍
weixin_31720623的博客
06-07 1614
QuerySelector()是一种可以从JavaScript 检测和获取任意HTML元素的方法，虽然JavaScript从开始就有可以获得HTML元素的getElemenById()和getElemetnsByClasNamo()等方法，但是，如果使用querySelector()，则可以在jQuery意义上有选择地指定HTML元素，而无需了解id属性值，class属性值等。简而言之，就是可以使...
js querySelector与getElementById
weixin_33835103的博客
07-12 141
querySelector不能取到id以数字开头的元素，据说是遵循css规范。而document.getElementById是可以的。 转载于:https://www.cnblogs.com/hualiu0/p/4640915.html
js关键字 let 和var、querySelector方法和getElementBy方法的比较
jwl18236975853的博客
05-18 549
目录 一：let 和var的比较 1.1语法规范 1.2变量提升 1.3作用域问题 二:document.querySelector方法和getElementById()方法： 2.1通过getElementBy家族获得的DOM元素对象会随着DOM元素的更新自动更新 2.1通过querySelector家族获得的DOM元素对象不会自动更新需要手动更新 一：let 和var的比较 1.1语法规范 名称 区别 var 允许对同一个变量名进行重复声名 let..
原生javascript找寻元素的方法（querySelect篇）
chunzhuang9775的博客
05-27 908
querySelector和querySelectorAll document对象的方法 说明 querySelector(class) 返回与给定css选择器匹配的第一个元素的引用（节点） ...
js中的document.querySelector()方法
最新发布
withkai44的博客
11-29 1万+
ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。位于元素之前，元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
js querySelector和getElementById通过id获取元素的区别
10-28
在JavaScript中，获取页面元素有多种方法，其中最为常见的两种是通过`document.getElementById`和`document.querySelector`。这两个方法虽然都可以用于根据元素的ID来获取页面上的元素，但它们之间存在一些关键的...
getElements系列和querySelector方法获取元素的简单区别
乄丶等待i的博客
07-28 1220
getElements系列和querySelector方法获取元素的区别 区别 getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合(快照) 简单的说就是，动态获取的元素会随文档改变，而静态的不会获取出来之后就和文档的改变无关了。 <!DOCTYPE html> <html lang="en"> <head> &lt...
返回到顶部组件两种方法使用ref和使用document.querySelector（“获取dom元素“）
weixin_58102387的博客
01-04 1899
一。我们要获取页面中的dom元素 这里我们有两种获取页面dom元素的方法 第一种是使用ref vue中ref的作用 vue中的ref其实功能很强大，下面介绍一下如何使用。 基本用法，本页面获取dom元素 <template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </d
js 的 document element 的 querySelectorAll写在for外内速度测试2207302107
kfepiza的博客
08-01 288
js 的 document element 的 querySelectorAll写在for外内速度测试2207302107使用变量,用时:42毫秒 不使用变量,用时:67毫秒 document.querySelectorAll().forEach( 用时:63毫秒 执行document.querySelectorAll(“.SpanC1”) 500次,用时 973 毫秒测试代码......
js中的getElementById和querySelector
mm_hello11的博客
10-04 574
querySelector()      返回匹配指定选择器的第一个元素。 querySelectorAll()  返回所有的节点元素 语法 document.querySelector(CSS selectors)      getElementsByTagName()   //返回的是所有的节点，是一个类数组对象 getElementById(id)   // 返回某个节点对象 语...
document.querySelector()方法
u010227042的博客
09-09 7183
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。 获取文档中id=”container”的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <
JavaScript中选择器函数querySelector和querySelectorAll
晴空闲云
11-20 4599
选择器是Css非常强大的功能，早先一般是通过getElementById和getElementsByTagName来获取页面元素，在一些场景下就很不方便。 后来DOM扩展出了Selector API标准，其中 Selector API Level 1 包含了querySelector和querySelectorAll两个方法，可以通过Css选择器匹配页面元素。 querySelector查询单个元素 querySelector用于查询页面中第一个符合规则的元素，可以在Document实例和Element实例
JavaScript中getElementById 和querySelector的区别
weixin_43814775的博客
09-23 805
JavaScript中getElementById 和querySelector的区别
getElement和querySelect(All)的区别
JXXHA的博客
11-04 745
对于getElementBy系列和query系列选择元素的区别 1.主要区别在于querySelectorAll比getElementBy系列速度慢 因为querySelectorAll返回一个静态的NodeList（深克隆） getElementBy系列返回一个动态的实时变化的NodeList（HTMLCollection）（浅克隆，每次都返回一个指针） 所以querySelectorAll会降低性能 什么叫静态的？ 意思是指选出的所有元素的数组，不会随着文档操作而改变。 用querySelector操作
javaScript---getElementBy与querySelector区别及querySelectorAll坑
maidu_xbd的博客
08-27 562
获取DOM元素的方法有： 通过id获取---【document.getElementById("id");】 通过类名---【document.getElementsByClassName("class")[0];】 通过标签名---【 document.getElementsByTagName("标签名")[0];】 通过name属性---【document.getElementsByName("name");】 查询选择器---【document.querySelector("id/...
js原生querySelector和getElement等方法
fury的博客
05-31 286
getElementsByClassName不需要加.querySelector需要加.
Javascript教程:querySelector()方法
10-14 2814
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements N
JS选择器getElement系列和querySelector系列的区别
qq_58114686的博客
01-17 483
记录在学习过程中遇到的问题
js document.querySelector 无法获取元素
06-07
如果 `document.querySelector` 无法获取元素，可能有以下几个原因： 1. 元素不存在：检查一下选择器是否正确，以及该元素是否存在于 DOM 中。 2. 元素还没有加载：如果你的代码在页面加载完成之前执行，那么元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值