不少人看到querySelector会下意识以为是jQuery中的语法,但是没想到吧hhh,是原生语法~有一说一,这两个长得确实挺让人感觉是一家的,谁让他们都带着query呢(手动狗头🐶)
-
语义区别
他俩本质都是选择器。如:getElementById返回拥有指定id的第一个对象的引用,querySelector 返回匹配指定结果的元素。
查找元素集合:querySlectorAll返回指定元素的集合。对应的有getElementsByTagName、getElementsByClassName。
PS: getElementByxxx查找都是单个元素,getElementsByxxx查找都是元素集合 -
输出结果
querySelector输出是NodeList
,getElement输出是HTMLCollection
。他们俩都是类数组
HTMLCollection
是element元素的集合,NodeList
是node的集合。
在DOM树中,所有节点都是node,而node又是element的基类,element是其他html元素的基类,如HTMLDivElement
-
选择结果对比
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是动态的,所以他会改变。
- 性能
在Chrome环境下,getElement方法的执行速度基本都高于querySelector。