标签: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));//选取第二个元素
标签:des style blog color io ar for div cti
原文地址:http://www.cnblogs.com/wuxiandiejia/p/3949794.html