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>
好吧暂时写到这,折腾了两小时,嗓子都干了
相关文章推荐
- JavaScript通过元素id和name直接获取元素对象
- javascript获取鼠标点击元素对象(示例代码)
- javascript 获取父页面中元素对象方法
- JQuery与javaScript如何获取select对象元素
- JavaScript:JavaScript中常见获取对象元素的方法
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
- javascript获取鼠标点击元素对象(示例代码)
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
- javascript获取form对象以及form元素对象的各种方式
- JavaScript获取对象中元素个数
- JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)
- javascript获取一个对象里面第一层元素的数量
- javascript获取鼠标点击元素对象
- javascript客户端遍历控件和怎么获取父容器对象
- 在MasterPage中使用javascript获取对象
- JavaScript获取DOM元素位置和尺寸大小
- 用Javascript获取页面元素的位置
- JavaScript获取HTML DOM节点元素的方法的总结
- jquery获取元素的值,获取当前对象的父对象等等
- JavaScript Date对象 日期获取函数