getElementById()、getElementsByClassName()、getElementsByTagName()和querySelector的用法和区别

一.用法
1.1getElementById():

• 定义：可以访问Documnent中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。

• 用法：getElementById(“id”)

//获取id="demo"的元素
document.getElementById("demo")

1.2getElementsByClassName():
[详细用法] https://blog.csdn.net/caa112/article/details/102505667

• 定义：返回文档中所有指定类名的元素集合(HTML集合)。
• 用法：
  获取同一个类名的数组：getElementsByClassName(“类名”)
  获取不同类名的数组（不同类名要空格隔开）:getElementsByClassName(“类名1 类名2”)

//获取class="demo"的元素
document.getElementsClassName("demo")

//获取class="demo1 demo2"
document.getElementsClassName("demo1 demo2")

1.3getElementsByTagName():

• 定义：可返回有顺序的、带有指定标签名的对象的集合。(HTML集合)

• 用法：
  获取同一个标签名的数组：getElementsByTagName(“标签名”)
  获取所有标签名：getElementsByTagName("*")

//获取所有p标签
<p>1<p>
<p>2<p>
<p>3<p>
<p>4<p>
document.getElementsTagName("p");

1.4querySelector():

• 定义：仅仅返回匹配指定选择器的第一个元素
• 用法：
  获取第一个p标签：querySelector(“p”)
  获取第一个为demo的类名：querySelector(".demo")
  获取第一个属性为target的a标签： querySelector(“a[target]”)
  获取多个选择器：querySelector(“h2,h3”)

//获取文档中 class="example" 的第一个元素:
document.querySelector(".example");

//获取文档中 class="example" 的第一个 <p> 元素:
document.querySelector("p.example");

获取文档中有 "target" 属性的第一个 <a> 元素：
document.querySelector("a[target]");

//以下实例演示了多个选择器的使用方法。
//假定你选择了两个选择器: <h2> 和 <h3> 元素。
以下代码将为文档的第一个 <h2> 元素添加背景颜色：
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";

1.5querySelectorAll():

• 定义：返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
• 用法：
  获取同一类名/标签名/id/属性值…：querySelectorAll(".类名/标签名…")
  获取多个(用逗号隔开)： querySelectorAll("#id,.class,标签名…")

// 获取文档中所有的 <p> 元素
var x = document.querySelectorAll("p");

//获取文档中所有 class="example" 的 <p> 元素
var x = document.querySelectorAll("p.example"); 

//获取文档中所有 class="example" 元素
var x = document.querySelectorAll(".example");

//查找文档中共包含 "target" 属性的 <a> 标签
var x = document.querySelectorAll("a[target]");

//查找文档中所有的 <h2>, <div> 和 <span> 元素
var x = document.querySelectorAll("h2, div, span");

二.区别：

1. 返回值的不同：
getXXXByXXX 获取的是动态集合（HTMLCollection集合），querySelector获取的是静态集合（NodeList集合）。
简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。
先看看一个例子：

<ul>
    <li>aaa</li>
    <li>ddd</li>
    <li>ccc</li>
</ul>
 
//demo1
var ul = document.getElementsByTagName('ul')[0],
      lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //6
 
//demo2
var ul = document.querySelectorAll('ul'),
      lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //3

Demo1 中的 lis 是一个动态的 Node List， 每一次调用 lis 都会重新对文档进行查询，导致无限循环的问题。
2.性能
在Chrome浏览器下getElementBy系列的执行速度基本都是高于querySelectorAll，普遍观点是getElementBy的性能比 querySelectorAll要好很多。
3.建议

如果只要一次查找就可得到元素时，首选getXXXByXXX ；
如果需要经过多级查找，才能得到元素时，首选querySelector