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集合能动态获取集合值。
