querySelector与getElementBy等的区别
获取元素DOM对象有很多种方法,以前一直在用getElementById和getElementsByTagName等,现在对这些方法和querySelector做一个总结.
常见的获取元素的方法有3种,分别是通过元素ID、通过标签名字和通过类名字来获取。
DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象,它是document对象特有的函数,只能通过其来调用该方法,使用方法如下:document.getElementById('idName')
;
getElementsByTagName方法返回一个对象数组(准确的说是HTMLCollection集合),返回元素的顺序是它们在文档中的顺序,传递给 getElementsByTagName() 方法的字符串可以不区分大小写,使用方法如下:document.getElementsByTagName(tagName)
;
DOM还提供了getElementsByClassName方法来获取指定class名的元素,该方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始), 所以有时使用时要指定下标,使用方法如下:document.getElementsByClassName('className')
;
querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素,需要使用 querySelectorAll() 方法替代.
由于querySelector是按css规范来实现的,所以它传入的字符串中第一个字符不能是数字.
最后再根据查询的资料总结一下:
query选择符选出来的元素及元素数组是静态的,而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组,不会随着文档操作而改变.
在使用的时候getElement这种方法性能比较好,query选择符则比较方便.
参考资料链接:
https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md
转: https://blog.csdn.net/levinhax/article/details/71274456
querySelector与getElementBy等的区别的更多相关文章
- querySelector与getElementBy系列的区别
getElementBy系列 document.getElementsByTagName('tag'); document.getElementById('id'); document.getElem ...
- querySelector与getElementBy的区别
1,querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 . 该方法只返回匹配指定选择器的第一个元素.如果要返回所有匹配元素,需要使用 querySelectorAll( ...
- querySelector和getElementById方法的区别
一.querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二.与 getEle ...
- querySelector和getElementById之间的区别
一.概述 今天在看js的时候发现里面的代码基本上都是用querySelector()和querySelectorAll()来获取元素,就有点疑惑为什么不用getElementById(),可能也是因为 ...
- 浅谈querySelector和getElementById之间的区别
前言: 最近学到前端一些知识,看到很多视频上许多老师都用的是querySelector而部分老师用的是getElementById,我就很疑惑,这两有啥区别,都是选择器,于是百度了一下明白了,quer ...
- querySelectorAll 和 getElementBy 方法的区别
作者:简生 链接:https://www.zhihu.com/question/24702250/answer/28695133 来源:知乎 1. W3C 标准 querySelectorAll 属于 ...
- getElementById和querySelector区别
1.常见的获取元素的方法有3种,分别是通过元素ID document.getElementById('idName');.通过标签名字document.getElementsByTagName(tag ...
- Javascript之十大常用原理性样例大总结
案例一:全选等 运用知识点:ondblclick=()| onclick | 寻找标签属性及判断和函数的应用
- getElementBy系列和querySelector系列的区别
querySelector和querySelectorAll的用法和getElementBy大致一样,获取的时候带上符号,getElementBy获取的是元素的动态集合,querySelector获取 ...
随机推荐
- Android 开源项目android-open-project解析之(四) ColorPickView,GraphView,UI Style,Other
十三.ColorPickView ColorPickerView 颜色选择器,支持PopupWindows或新的Activity中打开 项目地址:https://code.google.com/p/c ...
- 获得sql server的table的表结构 -- 转到word中
SQL语句: select syscolumns.name,systypes.name,syscolumns.length from syscolumns join sysobjects on sy ...
- Debian 安装记录
1.蓝色标注是安装的部分或配置的. 作者:http://www.cppblog.com/jinglexy上海体育馆 2.linux 发行版测评网站:www.distrowatch.com 打 ...
- 关于禁用html中a标签的思考
事实上这个问题在初次学习html中select标签时就已经冒出来了,时至今日,依旧没有找到使用纯css禁用a标签的办法--同事.同学.老师我都问过了,他们都千篇一律借助了JavaScript,难道真的 ...
- 卷积神经网络LeNet Convolutional Neural Networks (LeNet)
Note This section assumes the reader has already read through Classifying MNIST digits using Logisti ...
- Spring3之InternalResourceViewResolver
打开Spring的源代码,我们可以在org.springframework.web.servlet.view包下看到很多的 View和ViewResolver类;View类为我们提供一些缺省的待扩展的 ...
- Thinkphp学习笔记-模板主题
一个模块如果需要支持多套模板文件的话,就可以使用模板主题功能. 默认情况下,没有开启模板主题功能,如果需要开启,设置 DEFAULT_THEME 参数即可: // 设置默认的模板主题 'DEFAULT ...
- Python requests 报错解决集锦
python版本号和ssl版本号都会导致 requests在请求https站点时候会出一些错误,最好使用新版本号. 1 Python2.6x use requests 一台老Centos机器上跑着古老 ...
- T-SQL 之 公用表表达式(CTE)
在编写T-SQL代码时,往往需要临时存储某些结果集.在CTE之前常用的两种临时存储结果集为:临时表和表变量.除此之外,还可以使用公用表表达式的方法. 公用表表达式(Common Table Expre ...
- 从零开始编写自己的C#框架(25)——网站部署 【转】
服务器安全部署文档 目录1. 前言.. 3 2. 部署环境.. 3 2.1 服务器环境信息.. 3 3. 磁盘阵列配置.. 4 4. 安装操作系统.. ...