JavaScript之查找元素

在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++){
}

看到上面的代码是不是感觉和jQuery好像,简单明了,性能更佳,对不需要兼容老旧浏览器和开发移动端的以上都可以使用,省去了框架一身轻啊

最后祝大家春节快乐!

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章