元素查找的简单封装你会了吗？
2018-09-05 本文已影响0人
沉静的罗门
学javaScript的童鞋都知道，查找元素节点有四种方式
1、document.getElementById( "") ——根据元素的ID属性查找元素，ID名具有唯一性，若能查找到，返回DOM元素对象，若不能，则返回null；
2、getElementsByClassName("")——根据类名查找，返回HTMLCollection[]集合，若能查找到，将找到的元素保存到集合中，若不能，则集合长度为一；
3、getElementByTagName("")——（ES5新增）——根据元素标签名查找。返回HTMLCollection[]集合，若能查找到，将找到的元素保存到集合中，若不能，则集合长度为0；
4、getEllementsByName("")——根据元素的name属性值查找
在用的时候，根据类名查找元素还有个兼容问题，有些浏览器可能不支持document.getElementsByClassName()；
还有，在用类名查找和元素名查找时，因为其不具有唯一性，即在H5代码中可能有好多同名元素，这时候如果根据要找的DOM对象上下文查找（context.getElementByTagName）,可以节省一些运行时间，同时查找更精准。
这些都是查找元素会遇到的问题，
而且，总所周知，在写js时，不仅要用这几种查找元素节点的方式，还用得很频繁。写起来很繁琐；
所以，这时候我们就可以做一次函数封装，
一次辛苦，一生无忧（手动滑稽）
下面，就是我写的封装代码，仅供参考：
tool.js:
// 封装函数——元素查找
//将查找元素封装成$("")函数
//根据选择器查找元素
//选择器有ID名、类名、元素名
function $(selector,context){
//若没有传上下文元素，则默认为document
context=context||document;
//判断是否是ID
if(selector.indexOf("#")===0)
return document.getElementById(selector.slice(1));
//判断是否是Class类名
//用byClassName函数解决兼容问题
if(selector.indexOf(".")===0)
return byClassName(selector.slice(1),context);
//返回元素名查找
return context.getElementsByTagName(selector);
}
// 解决根据类名查找元素浏览器兼容
// className 待查找的类名
// context 查询上下文，即在该DOM元素后代查找满足选择器条件的元素，默认在 document 中查找
// return 返回查找到的元素
function byClassName(className,context){
//若没有传上下文元素，则默认为document
context=context||document;
// 支持使用 getElementsByClassName 方法，则直接使用
if(context.getElementsByClassName)
return context.getElementsByClassName(className);
//不支持使用 getElementsByClassName 方法
// 将查询上下文后代中所有元素查找出来(即所以类名)
var _tags=context.getElementsByTagName("*");
//遍历迭代
for(var i=0;i<_tags.length;i++){
//每个元素的所有类名(因为一个class可以有多个类名；如class="asd zc qwe")
var _classNames=_tags[i].className.split(" ");
for(var j=0;j<_classNames.length;j++){
if(_classNames[j]===className){
//只要有相同的类名，返回此元素，退出循环，进行下一次_tags查找
var _result=[]
_result=push(tag[i]);
break;
}
}
}
return _result;
}
H5测试代码：
<body>
<div class="box">
<div id="box" class="vzxc">rty</div>
<div class="box box1">fgh</div>
</div>
<div class="box1">
<div id="box1">qwe</div>
<p>asd</p>
<p>lkj</p>
</div>
<script src="封装——元素查找.js"></script>
<script type="text/javascript">
document.onclick=function(){
var htm=document.getElementById("box");
console.log("htm") ;
}
console.log(document.getElementsByClassName("box"));
console.log(document.getElementsByClassName("box1"));
console.log(document.getElementById("box"));
console.log(document.getElementsByTagName("p"));
console.log($(".box"))
console.log($(".box1"))
console.log($("#box"))
console.log($("p"))
</script>
</body>
完全没毛病，老铁
