获取元素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等的区别的更多相关文章

  1. querySelector与getElementBy系列的区别

    getElementBy系列 document.getElementsByTagName('tag'); document.getElementById('id'); document.getElem ...

  2. querySelector与getElementBy的区别

    1,querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 . 该方法只返回匹配指定选择器的第一个元素.如果要返回所有匹配元素,需要使用 querySelectorAll( ...

  3. querySelector和getElementById方法的区别

    一.querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二.与 getEle ...

  4. querySelector和getElementById之间的区别

    一.概述 今天在看js的时候发现里面的代码基本上都是用querySelector()和querySelectorAll()来获取元素,就有点疑惑为什么不用getElementById(),可能也是因为 ...

  5. 浅谈querySelector和getElementById之间的区别

    前言: 最近学到前端一些知识,看到很多视频上许多老师都用的是querySelector而部分老师用的是getElementById,我就很疑惑,这两有啥区别,都是选择器,于是百度了一下明白了,quer ...

  6. querySelectorAll 和 getElementBy 方法的区别

    作者:简生 链接:https://www.zhihu.com/question/24702250/answer/28695133 来源:知乎 1. W3C 标准 querySelectorAll 属于 ...

  7. getElementById和querySelector区别

    1.常见的获取元素的方法有3种,分别是通过元素ID document.getElementById('idName');.通过标签名字document.getElementsByTagName(tag ...

  8. Javascript之十大常用原理性样例大总结

    案例一:全选等 运用知识点:ondblclick=()| onclick | 寻找标签属性及判断和函数的应用

  9. getElementBy系列和querySelector系列的区别

    querySelector和querySelectorAll的用法和getElementBy大致一样,获取的时候带上符号,getElementBy获取的是元素的动态集合,querySelector获取 ...

随机推荐

  1. Android 开源项目android-open-project解析之(四) ColorPickView,GraphView,UI Style,Other

    十三.ColorPickView ColorPickerView 颜色选择器,支持PopupWindows或新的Activity中打开 项目地址:https://code.google.com/p/c ...

  2. 获得sql server的table的表结构 -- 转到word中

    SQL语句: select syscolumns.name,systypes.name,syscolumns.length from syscolumns  join sysobjects on sy ...

  3. Debian 安装记录

    1.蓝色标注是安装的部分或配置的.  作者:http://www.cppblog.com/jinglexy上海体育馆   2.linux 发行版测评网站:www.distrowatch.com   打 ...

  4. 关于禁用html中a标签的思考

    事实上这个问题在初次学习html中select标签时就已经冒出来了,时至今日,依旧没有找到使用纯css禁用a标签的办法--同事.同学.老师我都问过了,他们都千篇一律借助了JavaScript,难道真的 ...

  5. 卷积神经网络LeNet Convolutional Neural Networks (LeNet)

    Note This section assumes the reader has already read through Classifying MNIST digits using Logisti ...

  6. Spring3之InternalResourceViewResolver

    打开Spring的源代码,我们可以在org.springframework.web.servlet.view包下看到很多的 View和ViewResolver类;View类为我们提供一些缺省的待扩展的 ...

  7. Thinkphp学习笔记-模板主题

    一个模块如果需要支持多套模板文件的话,就可以使用模板主题功能. 默认情况下,没有开启模板主题功能,如果需要开启,设置 DEFAULT_THEME 参数即可: // 设置默认的模板主题 'DEFAULT ...

  8. Python requests 报错解决集锦

    python版本号和ssl版本号都会导致 requests在请求https站点时候会出一些错误,最好使用新版本号. 1 Python2.6x use requests 一台老Centos机器上跑着古老 ...

  9. T-SQL 之 公用表表达式(CTE)

    在编写T-SQL代码时,往往需要临时存储某些结果集.在CTE之前常用的两种临时存储结果集为:临时表和表变量.除此之外,还可以使用公用表表达式的方法. 公用表表达式(Common Table Expre ...

  10. 从零开始编写自己的C#框架(25)——网站部署 【转】

    服务器安全部署文档 目录1.     前言.. 3 2.     部署环境.. 3 2.1         服务器环境信息.. 3 3.     磁盘阵列配置.. 4 4.     安装操作系统.. ...