javascript获取元素封装代码实例
在jQuery中提供了各种获取元素的封装方法，当然这都是原生的javascript实现的。
在这里我们自己也来封装一个能够实现获取元素对象的封装效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#box li {
width: 350px;
height: 25px;
line-height: 25px;
font-size: 12px;
}
</style>
<script type="text/javascript">
function $(str,oPar){
var a=oPar?oPar.querySelectorAll(str):document.querySelectorAll(str);
if(str.indexOf("#")!=-1){
a[0].index=0;
return a[0]
}
else {
for (var index = 0, len = a.length; index < len; index++) {
a[index].index = index;
}
return a;
}
}
window.onload = function () {
var obox = document.getElementById("box");
var lis=$(".antzone", obox);
alert(lis[0].innerHTML);
}
</script>
</head>
<body>
<ul id="box">
<li>犀牛前端部落欢迎您，只有努力才会有美好的未来</li>
<li class="antzone">每一天都是新的，必须要好好把握。</li>
<li>没有人一开始就是高手，必须要努力奋斗。</li>
<li>未来都是虚无缥缈的，只有当前是现实。</li>
<li>分享和互助式进步的最大原动力</li>
<li>本站的url地址是www.pipipi.net。</li>
</ul>
</body>
</html>
代码的核心是$()方法，下面对其做一下分析:
一.代码注释:
（1）.function $(str,oPar){}，此方法能够返回一个元素集合或者元素，第一个参数是一个css选择器，第二个限定匹配范围的父元素。
（2）.var a=oPar?oPar.querySelectorAll(str):document.querySelectorAll(str)，如果存在父元素，那么就使用此父元素调用querySelectorAll()方法，否则使用document对象调用。
（3）.if(str.indexOf("#")!=-1){
a[0].index=0;
return a[0]
}，如果是ID选择器，那么给此元素添加一个自定义index属性，属性值设定为0。
并返回此元素。
querySelectorAll()返回的总是一个集合，即便使用的是id选择器。
（4）.else {
for (var index = 0, len = a.length; index < len; index++) {
a[index].index = index;
}
return a;
}，否则通过遍历的方式设置每一个元素的自定义index属性值。
二.相关阅读:
（1）.querySelectorAll()可以参阅document.querySelectorAll()一章节。
（2）.indexOf()可以参阅javascript indexOf()一章节。
javascript获取元素封装代码实例，这样的场景在实际项目中还是用的比较多的，关于javascript获取元素封装代码实例就介绍到这了。
javascript获取元素封装代码实例属于前端实例代码，有关更多实例代码大家可以查看。