JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了一个获取第n个元素节点的js函数大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

演示:html

1
  • 2
  • test

  • 3
  • 4
  • 5
  • js:

    ** * * @param parent父节点 * @param ele要选取的元素标签 * @param num第几个元素 * @return {*} */ function nth(parent,ele,num){ var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[]; //将父节点的子节点转换成数组_ele;eleArray为只储存元素节点的数组 for(var i= 0,len=_ele.length;i{ if(_ele[i].nodeType==1){ eleArray.push(_ele[i]);//过滤掉非元素节点 } } if(arguments.length===2){ //如果只传入2个参数,则如果第二个参数是数字,则选取父节点下的第几个元素 //如果第二个参数是字符串,则选取父节点下的所有参数代表的节点 if(typeof arguments[1]==="String"){ _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1])); return _ele; }else if(typeof arguments[1]==="number"){ return eleArraY[arguments[1]]; } }else{ //如果参数齐全,则返回第几个某节点,索引从0开始 _ele=Array.prototype.slice.call(parent.getElementsByTagName(elE)); return _ele[num]; } } /* 测试 */ var list=document.getElementById("list"); console.log(nth(list,"li",2).innerHTML);//选取第三个li元素 console.log(nth(list,"button",3).innerHTML)//选取第四个按钮 console.log(nth(nth(list,1),1).innerHTML);//选取第二个li下的第二个按钮 console.log(nth(nth(list,"button"));//选取第二个li下的所有按钮 console.log(nth(list,2));//选取第二个元素

    大佬总结

    以上是大佬教程为你收集整理的一个获取第n个元素节点的js函数全部内容,希望文章能够帮你解决一个获取第n个元素节点的js函数所遇到的程序开发问题。

    如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
    标签:元素节点