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

浙公网安备 33010602011771号