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://www.cnblogs.com/Tohold/p/9075699.html

querySelector与getElementBy等的区别相关推荐

querySelector和getElementById方法的区别
querySelector.querySelectorAll和getElementById.getElementsByTagName()等的区别在做开发时, getElementById() 返回带 ...
JavaScript中 querySelector 与 getElementById 方法的区别
1. 概述在看代码的时候发现基本上都是用 querySelector() 和 querySelectorAll() 来获取元素,疑惑为什么不用 getElementById(). 可能因为自己没用过 ...
querySelector 和 getElementById 之间的区别
今天在学习ts,使用ts做一款贪吃蛇小游戏的时候,在获取dom元素的时候,发现使用queryselect()查找元素再添加,发现里面的标签数量没有发生变化:当使用getElementById查找再向子 ...
getElementById和querySelector区别
1.常见的获取元素的方法有3种,分别是通过元素ID document.getElementById('idName');.通过标签名字document.getElementsByTagName(tag ...
9050 端口 linux 进程,Linux中查看某个端口占用情况
Bridge模式--对象结构型模式今天看了Bridge模式,对其进行简单的总结,并给出几篇通俗易懂的文章链接. (一)意图--将抽象部分和它的实现部分分离,使它们都可以独立地变化. 适用于从多维度描 ...
什么是闭包以及闭包的特点
什么是闭包以及闭包的特点闭包的主要作用是里面的变量和参数不会被垃圾回收机制回收函数的定义过程与执行过程 1.开辟一个存储空间来装代码块 2.预编译 3.将存储空间和预编译的空结合变成一个执行空间 ...
getElementById与querySelector的区别
getElementById与querySelector的区别首先对获取元素的几个方法有所了解 getElementById():返回对拥有指定id的第一个对象的引用 getElementsByNa ...
querySelector 和 getElementsByTagName区别
css + js 的一些小知识,本整理给自己巩固,有缘者观之,大牛绕道. document.getElementById('idName');通过元素id名, document.getElementB ...
[label][转载][JavaSript]querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？
轉載出處: http://www.zhihu.com/question/24702250 querySelectorAll 相比下面这些方法有什么区别? getElementsByTagName g ...

querySelector与getElementBy等的区别

querySelector与getElementBy等的区别相关推荐

最新文章

热门文章