学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>
完全没毛病,老铁
网友评论