一个获取第n个元素节点的js函数
一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善
演示:html
<ulid="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:
/**
*
*@paramparent父节点
*@paramele要选取的元素标签
*@paramnum第几个元素
*@return{*}
*/
functionnth(parent,ele,num){
var_ele=Array.prototype.slice.call(parent.childNodes),eleArray=[];
//将父节点的子节点转换成数组_ele;eleArray为只储存元素节点的数组
for(vari=0,len=_ele.length;i<len;i++){
if(_ele[i].nodeType==1){
eleArray.push(_ele[i]);//过滤掉非元素节点
}
}
if(arguments.length===2){
//如果只传入2个参数,则如果第二个参数是数字,则选取父节点下的第几个元素
//如果第二个参数是字符串,则选取父节点下的所有参数代表的节点
if(typeofarguments[1]==="string"){
_ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1]));
return_ele;
}elseif(typeofarguments[1]==="number"){
returneleArray[arguments[1]];
}
}else{
//如果参数齐全,则返回第几个某节点,索引从0开始
_ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));
return_ele[num];
}
}
/*
测试
*/
varlist=document.getElementById("list");
console.log(nth(list,"li",2).innerHTML);//选取第三个li元素
console.log(nth(list,"button",3).innerHTML)//选取第四个按钮
console.log(nth(nth(list,"li",1),"button",1).innerHTML);//选取第二个li下的第二个按钮
console.log(nth(nth(list,"li",1),"button"));//选取第二个li下的所有按钮
console.log(nth(list,2));//选取第二个元素热门推荐
10 迎接新年祝福语简短霸气
11 过年拜年祝福语大全简短
12 心理考试祝福语结婚简短
13 中考家长祝福语简短励志
14 英文节日祝福语简短唯美
15 最佳元旦祝福语简短学校
16 病人的生日祝福语简短
17 元旦祝福语简短给女友
18 中午祝福语简短句子