querySelector和getElementById方法的区别
querySelector和getElementById方法的区别
Leophen
发布于 2019-08-23 22:48:50
发布于 2019-08-23 22:48:50
一、querySelector() 的定义
- querySelector() 方法选择指定 CSS 选择器的第一个元素
- querySelectorAll() 方法选择指定的所有元素
二、与 getElementBy 的区别
这两个新添加的 API 与 getElementById() / getElementsByTagName() 有什么区别呢？
举个例子：
HTML 代码：
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>JS 代码：
{
let ul=document.getElementsByTagName('ul')[0];
let list=ul.getElementsByTagName('li');
console.log(list);
}
{
let ul=document.querySelector('ul');
let list=ul.querySelectorAll('li');
console.log(list);
}
// 输出结果
以上代码中，getElementBy 方法返回的结果是 HTMLCollection，而 querySelector 方法返回的结果是 NodeList；
另外，query 选择符选出来的元素是静态的，而 getElement 这种方法选出的元素的动态的。
这里的静态指的是选出的元素不会随着文档操作而改变。
操作实例如下：
HTML 代码：
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>用 querySelector 操作元素：
var ul=document.querySelector('ul');
var list=ul.querySelectorAll('li');
for(var i=0;i<3;i++){
ul.appendChild(document.createElement('li'));
}
// 这时创建了3个新li，添加在ul列表中
console.log(list.length)
// 输出3，输出的是添加前li的数量，而非此时li的总数量6用 getElement 操作元素：
var ul=document.getElementsByTagName('ul')[0];
var list=ul.getElementsByTagName('li');
for(var i=0;i<3;i++){
ul.appendChild(document.createElement('li'));
}
// 这时创建了3个新li，添加在ul列表中
console.log(list.length)
// 输出6以上代码中，querySelector 选择的 li 元素不会随着文档的操作而从3变为6；
在性能上，Chrome 浏览器下 getElementBy 方法的执行速度基本都高于 querySelector。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录