您的位置:首页 > Web前端 > JavaScript

javascript获取元素对象

2012-04-30 21:41 162 查看
这是一个轻量级的元素对象获取方法,类似JQuery中的$(),但还没那么强大

/**
* 返回指定id或name的元素标记
* @param mark : 类似CSS的元素标记
* e.g.  $('#id') ,$('.name'), $('tagName')
* 一次返回一个对象,内部设有指针,再次调用将返回集合的下一个元素
*/

// 存放对象结果集的指针
var objs_info = {};

function $(mark)
{
if(typeof mark !== 'string' || mark.length < 1){
console.log(typeof mark +" is not a string");
return false;
}

var obj;
// 如果其父也是经过 $()方法返回的
if( this == parent){
parentEle = this.document;
}else{
parentEle = this;
}

switch( mark[0] )
{
case '#':
obj  = parentEle.getElementById( mark.substr(1) );
break;
case '.':
var objs = parentEle.getElementsByName( mark.substr(1) );
break;

default:
var objs = parentEle.getElementsByTagName( mark );
}

if(typeof objs == 'object'){
if( typeof objs_info[mark]       == 'undefined' ||
typeof objs[objs_info[mark]] != 'object'      ){
// reset 重置指针
objs_info[mark] = 0;
}
obj = objs[objs_info[mark]++];
}

if(typeof obj != 'object' || obj == null){
console.log( mark +' is undefined');
}else{
// 为此元素递归绑定该方法
obj.$ = $;
return obj;
}

}


调用方法就很简单:

<menu style="margin:0px; padding:0px; " id="menu">
<a href="/?" >
<li class="menu"><span>index</span></li>
</a>
<a href="/?controller=user" >
<li class="menu"><span>me</span></li>
</a>
<a href="/?controller=friend" >
<li class="menu"><span>friend</span></li>
</a>
</menu>
<script>
/* 若参数为元素名,将返回的不是元素对象的集合,而是集合中的一个对象。
* 依次调用将依次返回集合中的元素,若全部返回完再调用则从头开始。
*/
// 重复调用4次
$('menu').$('a').$('span').innerHTML;
$('menu').$('a').$('span').innerHTML;
$('menu').$('a').$('span').innerHTML;
$('menu').$('a').$('span').innerHTML;
/* 输出
"index"
"me"
"friend"
"index"
*/

// 最前面为 # 号,将返回id如 menu 的元素
$('#menu');
// 结果同上
$('menu');

</script>


好吧暂时写到这,折腾了两小时,嗓子都干了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: