浅析querySlector和getElementBy输出区别

不少人看到querySelector会下意识以为是jQuery中的语法，但是没想到吧hhh，是原生语法～有一说一，这两个长得确实挺让人感觉是一家的，谁让他们都带着query呢（手动狗头🐶）

1. 语义区别
   他俩本质都是选择器。如：getElementById返回拥有指定id的第一个对象的引用，querySelector 返回匹配指定结果的元素。
   查找元素集合：querySlectorAll返回指定元素的集合。对应的有getElementsByTagName、getElementsByClassName。
   PS: getElementByxxx查找都是单个元素，getElementsByxxx查找都是元素集合

2. 输出结果
   querySelector输出是NodeList，getElement输出是HTMLCollection。他们俩都是类数组
   HTMLCollection是element元素的集合，NodeList是node的集合。
   在DOM树中，所有节点都是node，而node又是element的基类，element是其他html元素的基类，如HTMLDivElement

3. 选择结果对比

• querySelector输出的结果是静态的

let ul = document.querySelector('ul');
let list = ul.querySelectorAll('li'); // li的个数为3个
ul.appendChild(document.createElement('li'));
console.log(li.list) // 输出之前li的数量 3

• getElement输出的结果是动态的。

let ul = document.getElementsByTagName('ul')[0];
let list = ul.getElementsByTagName('li'); // li的个数为3个
ul.appendChild(document.createElement('li'));
console.log(li.list) // 输出 4,会动态加上刚才添加的li的个数

总结：querySelector的元素不会随着文档的操作而改变，而getElement是动态的，所以他会改变。

4. 性能
   在Chrome环境下，getElement方法的执行速度基本都高于querySelector。