getElement*** 与querySelector（All）的区别

Dear 丶 2022-02-27 02:58 150阅读 0赞

学习JavaScript高级中，发现getElement\*\*\* 与querySelector（All）都能拿到dom节点，故想了解下他们的差别：

"querySelector 属于 W3C 中的 Selectors API 规范 。而 getElementsBy 系列则属于 W3C 的 DOM 规范"

**1、区别**

etXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。

简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。

先看看一个例子：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </td> 
 <td> <code>&lt;ul&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;aaa&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;ddd&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;ccc&lt;/li&gt;</code> <code>&lt;/ul&gt;</code> &nbsp; <code>//demo1</code> <code>var</code>&nbsp;<code>ul = document.getElementsByTagName(</code><code>'ul'</code><code>)[0],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>lis = ul.getElementsByTagName(</code><code>"li"</code><code>);</code> <code>for</code><code>(</code><code>var</code>&nbsp;<code>i = 0; i &lt; lis.length ; i++){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ul.appendChild(document.createElement(</code><code>"li"</code><code>));</code> <code>}</code> <code>console.log( lis.length);&nbsp;&nbsp;</code><code>//6</code> &nbsp; <code>//demo2</code> <code>var</code>&nbsp;<code>ul = document.querySelectorAll(</code><code>'ul'</code><code>),</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>lis = ul.querySelectorAll(</code><code>"li"</code><code>);</code> <code>for</code><code>(</code><code>var</code>&nbsp;<code>i = 0; i &lt; lis.length ; i++){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ul.appendChild(document.createElement(</code><code>"li"</code><code>));</code> <code>}</code> <code>console.log( lis.length);&nbsp;&nbsp;</code><code>//3</code> </td> 
 </tr> 
 </tbody> 
</table>

Demo1 中的 lis 是一个动态的 Node List， 每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。

**2、性能**

使用getElementById的性能要好些。

### 3、querySelector() 与 querySelectorAll() ###

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

**4、总结**

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

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