原生js实现基本选择器

我们所知常见的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];
posted @ 2016-06-25 21:47  f2eone  阅读(976)  评论(0编辑  收藏  举报