JavaScript之查找元素

浏览数：21 / 时间：2015年06月08日

在IE6还大行其道的时候，原生JS操作DOM有各种各样的问题，jQuery应运而生，它解决了人们的痛点，对各种浏览器及其各种版本的兼容是相当的赞，而且易上手（不包括jQuery2.0），但他毕竟是库，性能上面还是弱于原生的。如今许多公司已经放弃兼容IE6和7甚至8，所以原生JS操作DOM可以搬上台面了，尤其是原生在查找元素方面的扩展可以让你不在依赖jQuery，下面详说
原生查找元素最基本的三个
document.getElementById()接受一个参数：要取得的元素的ID，查找到则返回该元素，反之返回null。
document.getElementsByTagName()接受一个参数：要取得的元素标签名。
document.getElementsByName()顾名思义返回带有给定name特性的所有元素。
这三者中也有兼容性问题，针对本身有name属性的HTML元素，document.getElementById()和document.getElementsByName()一样在IE7及以下都可以取到，本身没有的document.getElementById()则取不到。还有就是针对document.getElementsByName()各浏览器返回的都不同，IE返回HTMLCollection对象,Chrome和Firefox返回NodeList对象，这与JS高级程序设计的说法也是不同的。以上都是小问题啦，稍加注意就可以避免，但缺乏对元素class属性的的DOM选择才是最大的无助，做前端的都知道ID尽量都是留给后端开发用的，jQuery就可以，$(".class")多么的简单。。。当然原生在选择符上面也是在发展，首先Selectors API的制定，第一个版本有两个核心方法：querySelector()和querySelectorAll()，IE8+、Firefox3.5+、Safari3.1+、Chrome和Opera10+都支持，可以通过Document和Element类型的实例进行调用。
querySelector()
该方法接受一个css选择符，返回与该模式匹配的第一个元素，没找到则返回null。

//获取body元素
var body=document.querySelector("body");
    
//获取有ID的元素
var myDiv=document.querySelector("#myDiv");
    
//获取有class为choose的第一个元素
var choose=document.querySelector(".choose");

querySelectorAll()

该方法也接受一个css选择符，只不过返回的是NodeList实例，没找到NodeList就是空的。

//获取em元素
var ems=document.querySelectorAll("em");
    
//获取class为choose的所有元素
var choose=document.querySelectorAll(".choose");

上面的两个选择符API的出现弥补了不可对class操作的空白，但还不够，HTML5新增了很多API，其中就有关于class的，简化了对类的操作

getElementsByClassName()

该方法IE9+、Firefox3+、Safari3.1+、Chrome和Opera9.5+都支持，可以通过document对象和所有的HTML元素调用，返回HTMLCollection，JS高程上说返回NodeList有失偏颇，具体参见我之前写的一篇文章http://www.cnblogs.com/web-lexi/p/3907485.html

//获取包含link和yellow的元素（是一个元素两个class都要有才会取到，先后顺序无所谓）
var allClass=document.getElementsByClassName("link yellow");
    
//获取ID为myDiv中包含link的元素（获取到的是myDiv元素的后代元素）
var links=document.getElementById("myDiv").getElementsByClassName("link");

classList

也是HTML5新增的操作类的方式，具有length属性，通过它操作类方便简单许多，支持Firefox3.6+、Chrome、IE10+

//删除一个类
div.classList.remove("class");
//新增一个类
div.classList.add("class");
//切换一个类
div.classList.toggle("class");
//确定是否包含某个类
if(div.classList.contains("class")){
}
//迭代类名
for(var i=0,len=div.classList.length; i<len;i++){
}