1.获取元素的几种方式
1.通过id名获取元素
document.getElementById("id名");2.通过class名获取元素
document.getElementsByClassName("class名"); 3.通过元素标签去获取元素
document.getElementsByTagName("标签名");4.通过css选择器去获取元素
document.querySelectorAll("css选择器 ");//（1）
document.querySelector("css选择器 ");//（2）
//（1）和（2）两者不同
其中不同的是：
document.getElementsByClassName("class名");
document.getElementsByTagName("标签名");
返回值是为HTMLCollection的集合。
document.querySelectorAll("css选择器 ")
返回值是为Nodelist的集合。
2.HTMLCollection集合和Nodelist集合的区别
其中：HTMLCollection集合能动态获取集合值。
Nodelist集合不能动态获取集合值。
3.举例说明
下面代码的作用是用js往大盒子中添加5个小盒子。
用document.querySelectorAll("css选择器 ")来获取div。不能动态获取div。从打印的divs.length的长度可以看出。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:500px;
height:500px;
border: 1px solid #000;
}
#box div{
width:100px;
height:100px;
background-color:pink;
font: 50px/2 "微软雅黑";
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
var divs = box.querySelectorAll("div");//获取的是此时此刻box中的所有的div节点
console.log( divs.length );
var str = "";
for(var i = 0;i<5;i++){
str += "<div>"+i+"</div>";
}
box.innerHTML = str;
console.log( divs.length );
</script>
</body>
</html>结果为：
说明：
在往大盒子添加小盒子之前：divs.length=0
在往大盒子添加小盒子之后：divs.length=0
所以： var divs = box.querySelectorAll("div");//获取的是此时此刻box中的所有的div节点。
总结：Nodelist集合不能动态获取集合值。
其中script中的代码改为：
var box = document.getElementById("box");
var divs = box.getElementsByTagName("div");////动态获取box中div集合
console.log("往大盒子添加小盒子之前："+ divs.length );
var str = "";
for(var i = 0;i<5;i++){
str += "<div>"+i+"</div>";
}
box.innerHTML = str;
console.log("往大盒子添加小盒子之后：" +divs.length );结果为：
说明：
在往大盒子添加小盒子之前：divs.length=0
在往大盒子添加小盒子之后：divs.length=5
所以： var divs = box.getElementsByTagName("div");//动态获取box中div集合.
总结：HTMLCollection集合能动态获取集合值。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。