AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

js通过classname来获取元素的方法

51自学网 http://www.wanshiok.com
js获取元素classname

原生JS有3种方式来获取元素:

getElementById('id')getElementsByName('name')getElementsByTagName('tag')getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素function getElementsByClassName(className,tagName){var ele=[],all=document.getElementsByTagName(tagName||"*");for(var i=0;i<all.length;i++){if(all[i].className==className){ele[ele.length]=all[i]; }}return ele;}console.log(getElementsByClassName("entry"));console.log(getElementsByClassName("entry","div"));

实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的

tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等..

上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办?

明显通过className==是不行了

所以我们只要把上面两篇文章的hasclass函数搬过来就OK了,我们再次来改造下我们的getElementsByClassName函数

function getElementsByClassName(className,tagName){var ele=[],all=document.getElementsByTagName(tagName||"*");for(var i=0;i<all.length;i++){if(all[i].className.className.match(new RegExp('(//s|^)'+cls+'(//s|$)'))){ele[ele.length]=all[i];} }return ele;}

这样就能处理一个元素含有多个classname的情况了

以上就是小编为大家带来的js通过classname来获取元素的方法全部内容了,希望大家多多支持wanshiok.com~


js获取元素classname  
上一篇:纯javascript版日历控件  下一篇:jQuery实现checkbox列表的全选、反选功能