原生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];