首页 > 代码库 > js获取第n个元素节点
js获取第n个元素节点
一个获取第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个元素节点
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。