码迷,mamicode.com
首页 > Web开发 > 详细

js获取第n个元素节点

时间:2014-09-01 19:25:53      阅读:538      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   color   io   ar   for   div   cti   

一个获取第n个元素节点的函数,现在只能通过初入html标签获取元素,功能还不完善

演示:html

<ul id="list">
    <li>1<button>a</button></li>
    <li>2<button>b</button><button>o</button></li>
    <p>test</p>
    <li>3<button>c</button></li>
    <li>4<button>d</button></li>
    <li>5<button>e</button></li>
</ul>

js:

 1 /**
 2   *
 3   * @param parent父节点
 4   * @param ele要选取的元素标签
 5   * @param num第几个元素
 6   * @return {*}
 7   */
 8 function nth(parent,ele,num){
 9     var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[];
10      //将父节点的子节点转换成数组_ele;eleArray为只储存元素节点的数组
11     for(var i= 0,len=_ele.length;i<len;i++){
12       if(_ele[i].nodeType==1){
13           eleArray.push(_ele[i]);//过滤掉非元素节点
14         }
15     }
16     if(arguments.length===2){
17         //如果只传入2个参数,则如果第二个参数是数字,则选取父节点下的第几个元素
18         //如果第二个参数是字符串,则选取父节点下的所有参数代表的节点
19         if(typeof arguments[1]==="string"){
20             _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1]));
21             return _ele;
22         }else if(typeof arguments[1]==="number"){
23             return eleArray[arguments[1]];
24         }
25     }else{
26         //如果参数齐全,则返回第几个某节点,索引从0开始
27         _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));
28         return _ele[num];
29     }
30 }
31  /*
32  测试
33   */
34     var list=document.getElementById("list");
35     console.log(nth(list,"li",2).innerHTML);//选取第三个li元素
36     console.log(nth(list,"button",3).innerHTML)//选取第四个按钮
37     console.log(nth(nth(list,"li",1),"button",1).innerHTML);//选取第二个li下的第二个按钮
38     console.log(nth(nth(list,"li",1),"button"));//选取第二个li下的所有按钮
39     console.log(nth(list,2));//选取第二个元素

 

js获取第n个元素节点

标签:des   style   blog   color   io   ar   for   div   cti   

原文地址:http://www.cnblogs.com/wuxiandiejia/p/3949794.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!