封装DOM查找元素方法

最新推荐文章于 2021-07-22 11:08:48 发布

lusizhifei

最新推荐文章于 2021-07-22 11:08:48 发布

阅读量510

点赞数

分类专栏： js 文章标签：封装DOM查找元素方法

本文链接：https://blog.csdn.net/lusizhifei/article/details/56018558

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装节点</title>
</head>
<body>
<div style=""></div>
<div class="c3"></div>
<div id="box">
<div class="c1 c2"></div>
<div class="c3">规范合格</div>
<span class="c2"></span>
</div>
<p class="c3"></p>
</body>
<script type="text/javascript">
// 封装查找元素
// selector:选择器
// context:查找元素的上下文,可选参数，默认为document
function $(selector,context){
context=context||document;//默认取值document
if(selector[0]=="#")
return document.getElementById(selector.slice(1));
if(selector[0]==".")
return getByClass(selector.slice(1),context);

return document.getElementsByTagName(selector);
}

// 解决 getElementsByClassName(IE9之后才支持) 兼容问题;
function getByClass(className,context){
context=context||document;//默认取值document
if(document.getElementsByClassName)
return context.getElementsByClassName(className);
/*不支持就解决兼容性；*/
//先找到所有的标签
var result=[];//保存查找结果的数组
var tags=context.getElementsByTagName('*');
//循环遍历所有的标签,判断该标签是否有带查找的类名；
for(var i=0,len=tags.length;i<len;i++){
//获取当前遍历到标签的类的名字
var classNames=tags[i].className.split(" ");
//遍历当前标签的所有类名
for(var j=0,l=classNames.length;j<l;j++){
if(classNames[j]==className)//说明当前遍历过的标签有使用过这个类的名字
result.push(tags[i]);
break;
}
}
return result;
}

console.log($('.c3',$('#box'))[0].innerHTML);//找到div为box下面的class名为c3的div;
</script>
</html>