JS中querySelector与getElementById⽅法区别
⽬录
1. 概述
1.1 querySelector() 和 querySelectorAll() 的⽤法
1.2 getElement(s)Byxxxx 的⽤法
2. 区别
2.1 getElement(s)Byxxxx 获取的是动态集合，querySelector 获取的是静态集合
2.2 接收的参数不同
2.3 浏览器兼容不同
1. 概述
在看代码的时候发现基本上都是⽤querySelector() 和querySelectorAll() 来获取元素，疑惑为什么不⽤getElementById() 。
可能因为⾃⼰没⽤过那两个，所以并不清楚原因所在。
1.1 querySelector() 和 querySelectorAll() 的⽤法
querySelector() ⽅法
定义：querySelector()⽅法返回⽂档中匹配指定 CSS 选择器的⼀个元素；
注意：uerySelector() ⽅法仅返回匹配指定选择器的第⼀个元素。如果你需要返回所有的元素，请⽤ querySelectorAll() ⽅法替代；
语法：document.querySelector(CSS selectors)；
参数值：String  必须。指定⼀个或多个匹配元素的 CSS 选择器。使⽤它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于多个选择器，使⽤逗号隔开，返回⼀个匹配的元素。
返回值:  匹配指定 CSS 选择器的第⼀个元素。如果没有到，返回 null。如果指定了⾮法选择器则抛出 SYNTAX_ERR 异常。
querySelectorAll() ⽅法
定义：querySelectorAll() ⽅法返回⽂档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象；
NodeList 对象表⽰节点的集合。可以通过索引访问，索引值从 0 开始；
提⽰:    可使⽤ NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后遍历所有元素，从⽽获取想要的信息；
语法：elementList = document.querySelectorAll(selectors);
elementList 是⼀个静态的NodeList 类型的对象；
selectors 是⼀个由逗号连接的包含⼀个或多个CSS 选择器的字符串；
参数值：String  必须。指定⼀个或多个匹配 CSS 选择器的元素。可以通过id, class, 类型, 属性, 属性值等作为选择器来获取元素。
多个选择器使⽤逗号(,)分隔。
返回值:  ⼀个NodeList 对象，表⽰⽂档中匹配指定 CSS 选择器的所有元素。
NodeList 是⼀个静态的NodeList 类型的对象。如果指定的选择器不合法，则抛出⼀个 SYNTAX_ERR 异常。
1.2 getElement(s)Byxxxx 的⽤法
getElementById() ⽅法
定义：getElementById() ⽅法可返回对拥有指定 ID 的第⼀个对象的引⽤。
如果没有指定 ID 的元素返回null;
如果存在多个指定 ID 的元素则返回第⼀个;
如果需要查到那些没有 ID 的元素，你可以考虑通过CSS选择器使⽤ querySelector();
语法: ElementById(elementID);
参数值：String 必须。元素ID属性值。
返回值:  元素对象指定ID的元素
getElementsByTagName() ⽅法
定义：getElementsByTagName() ⽅法可返回带有指定标签名的对象的集合；
提⽰：参数值 "*" 返回⽂档的所有元素；
语法：ElementsByTagName(tagname)
参数：String 必须要获取元素的标签名；
返回值：NodeList 对象指定标签名的元素集合
getElementsByClassName() ⽅法
定义：getElementsByClassName()⽅法返回⽂档中所有指定类名的元素集合，作为NodeList 对象。
NodeList 对象代表⼀个有顺序的节点列表。NodeList 对象可通过节点列表中的节点索引号来访问表中的节点(索引号由0开始)。提⽰：可使⽤ NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取需要的那个元素。
语法：  ElementsByClassName(classname)
参数：  String 必须需要获取的元素类名。多个类名使⽤空格分隔，如 "test demo"；
返回值： NodeList 对象，表⽰指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。
2. 区别
2.1 getElement(s)Byxxxx 获取的是动态集合，querySelector 获取的是静态集合
动态就是选出的元素会随⽂档改变，静态的不会取出来之后就和⽂档的改变⽆关了。
⽰例1：
<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
//获取到ul，为了之后动态的添加li
var ul = ElementById('box');
//获取到现有ul⾥⾯的li
var list = ul.getElementsByTagName('li');
for(var i =0; i < list.length; i++){
ul.ateElement('li')); //动态追加li
}
</script>
nodeselector上述代码会陷⼊死循环，i < list.length 这个循环条件。
因为在第⼀次获取到⾥⾯的 3 个 li 后，每当往 ul ⾥添加了新元素后，list便会更新其值，重新获取ul⾥的所有li。
也就是getElement(s)Byxxxx 获取的是动态集合，它总会随着dom 结构的变化⽽变化。
也就是每⼀次调⽤ list 都会重新对⽂档进⾏查询，导致⽆限循环的问题。
⽰例1 修改：
将 for 循环条件修改为 i < 4，结果在 ul ⾥新添加了4个元素，所有现在插⼊的 li 标签数量是7。
<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
var ul = ElementById('box');
var list = ul.getElementsByTagName('li');
for(var i = 0; i < 4; i++){
ul.ateElement('li'));
}
console.log('list.length：',list.length);
</script>
JavaScript中querySelector 与getElementById ⽅法的区别_javascript
⽰例2：
下述代码静态集合体现在.querySelectorAll(‘li') 获取到 ul ⾥所有 li 后，不管后续再动态添加了多少 li，都是不会对其参数影响。<body>
<ul id="box">
<li class="a">测试1</li>
<li class="a">测试2</li>
<li class="a">测试3</li>
</ul>
</body>
<script type="text/javascript">
var ul = document.querySelector('ul');
var list = ul.querySelectorAll('li');
for(var i = 0; i < list.length; i++){
ul.ateElement('li'));
}
console.log('list.length：',list.length); //输出的结果仍然是 3，不是此时 li 的数量 6
</script>
JavaScript中querySelector 与getElementById ⽅法的区别_javascript_02
为什么要这样设计呢？
在 W3C 规范中对 querySelectorAll ⽅法有明确规定：
The NodeList object returned by the querySelectorAll() method must be static ([DOM], section 8).
我们再看看在 Chrome 上⾯是个什么样的情况：
document.querySelectorAll('a').toString();    // return "[object NodeList]"
HTMLCollection 在 W3C 的定义如下：
An HTMLCollection is a list of nodes. An individual node may be accessed by either ordinal index or the node's name or id attributes.Note: Collections in the HTML DOM are assumed to be live meaning that they are
automatically updated when the underlying document is changed.
实际上，HTMLCollection 和NodeList ⼗分相似，都是⼀个动态的元素集合，每次访问都需要重新对⽂档进⾏查询。
区别：HTMLCollection 属于 Document Object Model HTML 规范，⽽ NodeList 属于Document Object Model Core 规范。
这样说有点难理解，看看下⾯的例⼦会⽐较好理解：
var ul = ElementsByTagName('ul')[0],
lis1 = ul.childNodes,
lis2 = ul.children;
console.String(), lis1.length);    // "[object NodeList]" 11
console.String(), lis2.length);    // "[object HTMLCollection]" 4
NodeList 对象会包含⽂档中的所有节点，如Element、Text 和Comment 等；
HTMLCollection 对象只会包含⽂档中的Element 节点；
另外，HTMLCollection 对象⽐NodeList 对象多提供了⼀个namedItem ⽅法；
因此在浏览器中，querySelectorAll 的返回值是⼀个静态的NodeList 对象，⽽getElementsBy 系列的返回值实际上是⼀个HTMLCollection 对象。
2.2 接收的参数不同
querySelectorAll ⽅法接收的参数是⼀个 CSS 选择符；
getElementsBy 系列接收的参数只能是单⼀的className、tagName 和name；
var c1 = document.querySelectorAll('.b1 .c');
var c2 = ElementsByClassName('c');
var c3 = ElementsByClassName('b2')[0].getElementsByClassName('c');
注意：querySelectorAll 所接收的参数是必须严格符合 CSS 选择符规范的
下⾯这种写法，将会抛出异常（CSS 选择器中的元素名，类和 ID 均不能以数字为开头）。
try {
var e1 = ElementsByClassName('1a2b3c');
var e2 = document.querySelectorAll('.1a2b3c');
} catch (e) {
<(e.message);
}
console.log(e1 && e1[0].className);
console.log(e2 && e2[0].className);
2.3 浏览器兼容不同
querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ ⽀持；
getElementsBy 系列，以最迟添加规范中的 getElementsByClassName 为例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经⽀持；
到此这篇关于JavaScript中 querySelector 与 getElementById ⽅法区别的⽂章就介绍到这了，更多相关JavaScript中querySelector 与 getElementById 内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。