1.使用JS获取页面中某个元素的4种方法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）两者不同5.补充说明：如果想要在控制台打印页面上的所有dom节点，以下两张方法都可以。方法一：console.log( document.getElementsByTagName("*") );方法二：console.log( document.all ); 举例说明<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <h2></h2> <ul> <li></li> <li></li> <li></li> </ul> </div> <script>// console.log( document.getElementsByTagName("*") ); console.log( document.all ); </script> </body></html>代码运行结果2.方法之间的差别<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ background: palevioletred; } .red{ background: red; } </style></head><body> <ul id="listOne" class="order"> <li class="active">0</li> <li class="active">1</li> <li> <ul> <li class="active">2-1</li> <li>2-2</li> </ul> </li> </ul> <ul> <li>0</li> <li>1</li> </ul></body></html>需求一：获取页面中id="listOne"的ul，并给此ul添加红色的背景。方式一: 使用 通过 id名 获取元素var list=document.getElementById("listOne");console.log(list);list.style.background="red";结果：说明：因为页面上的id是唯一的，所以控制台打印的值就是页面上的id="listOne" 的 ul。后面一个ul没取到。 解释说明：优点：因为页面上的id是唯一的，所以很好确定并取到对应的元素。缺点：因为id是唯一的，但是在css样式中，给元素一般都是取 class名。如果使用id，元素样式不太好复用。方式二: 使用 通过 class名 获取元素错误代码：var list=document.getElementsByClassName("order");console.log(list);list.style.background="red";结果：错误原因：1.页面上的class取名不是唯一的，是可以重复的。所以document.getElementsByClassName("order");的返回值是一个类似数组的集合，为HTMLCollection(1)。2.就算页面上面只有一个class=“order”，它的返回值依旧是集合。3.集合并没有style的属性，所以会报错。正确代码：var list=document.getElementsByClassName("order")[0];//用素组下标去取console.log(list);list.style.background="red";结果： 解释说明：优点：方便写结构样式。缺点：class取值 ie9以下不支持。方式三 : 使用 通过 元素标签 获取元素var list=document.getElementsByTagName("ul")[0];//用素组下标去取console.log(list);list.style.background="red";结果：说明：1.元素标签和class名是一样的，在页面是可以重复的。所以理解起来，可以当成class名去理解。解释和class名是一样的。2.document.getElementsByTagName("ul");的返回值是一个类似数组的集合，因为页面上有两个ul，所以返回值为HTMLCollection(2)。3.就算页面上面只有一个标签，它的返回值依旧是集合。3.集合并没有style的属性，所以需要用下标去取。 解释说明：优点：方便写结构样式。缺点：没有兼容问题。需求二：获取页面中id为“listOne”的ul的第一层子级。其子级的class为active。并把其背景改成红色.这时只能选用css选择器。var li=document.querySelectorAll("#listOne > .active");console.log(li);li[0].className="red";li[1].className="red";结果:说明:1.document.querySelectorAll("css选择器");如何用css选中，在“ ”内就如何写。eg：document.querySelectorAll("#listOne > .active");2.console.log(li);返回值也是一个类似数组的集合。返回值为NodeList(2)。3.所以也需要用下标去取值。解释:1.比较好用，比较常用。2.但是也存在兼容问题 ie9以下不支持。querySelectorAll("css选择器 ")和querySelector("css选择器 ")的区别：如果以上代码用querySelector("css选择器 ")写var li=document.querySelector("#listOne > .active");console.log(li);li.className="red";结果：说明：1.document.querySelector("#listOne > .active")只取到第一个取到的值。第二个值不取。2.返回的不是集合，所以可以直接使用。解释:1.不太常用。2.存在兼容问题 ie9以下不支持。
