querySelector和getElementById方法的区别

 

一、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。

 

posted @ 2019-07-24 22:48  Leophen  阅读(2023)  评论(0编辑  收藏  举报