原生js实现基本选择器

最新推荐文章于 2023-08-11 15:59:52 发布

weixin_30861797

最新推荐文章于 2023-08-11 15:59:52 发布

阅读量221

点赞数

原文链接：http://www.cnblogs.com/f2eo/p/5615494.html

版权

我们所知常见的JS 基本选择器有获取ID 的：getElementByid，获取name 的:getelementsbyname，返回带有指定标签名的对象的集合getElementsByTagName()；但获取class原生JS 就没有提供了，只要用jquery 里面class选择器，不过也可以通过JS 来写个简单的

function getEleClass(cls){
　　var classobj= new Array();//定义数组
　　var classint=0;//定义数组的下标 
　　var tags=document.getElementsByTagName("*");//获取HTML的所有标签

　　for(var i in tags){
　　　　if(tags[i].nodeType==1){//判断节点类型 
　　　　　　if(tags[i].getAttribute("class") == cls)//判断和需要CLASS名字相同的，并组成一个数组
　　　　　　　　{ 
　　　　　　　　　　classobj[classint]=tags[i]; 
　　　　　　　　　　classint++; 
　　　　　　　　}
　　　　　　} 
　　} 
　　　　return classobj;//返回组成的数组
 }

可以这样使用

window.onload =function(){
   var test = getEleClass("atest");
  　　test[0].onclick = function(){
    　　alert("class!!");
  　　}
　　}

而在IE8以上的流量器还有另外一种写法 querySelector 和 querySelectorAll 
querySelectorAll 可以获取多个元素，querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。这个平时用的不算多，使用期来也不复杂
比如举个例子，将 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，
document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];

转载于:https://www.cnblogs.com/f2eo/p/5615494.html