一个获取第n个元素节点的js函数

 更新时间:2014年09月02日 15:47:45   投稿:whsnow  
这篇文章主要介绍了一个获取第n个元素节点的js函数,功能还不完善 ,需要的朋友可以参考下

一个获取第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:

/**
*
* @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<len;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,"li",1),"button",1).innerHTML);//选取第二个li下的第二个按钮
console.log(nth(nth(list,"li",1),"button"));//选取第二个li下的所有按钮
console.log(nth(list,2));//选取第二个元素

相关文章

  • JS写谷歌浏览器chrome的外挂实例

    JS写谷歌浏览器chrome的外挂实例

    本篇文章主要给大家讲解了一个用JS写出的谷歌浏览器的怪挂实例,以及给大家分享了其中的代码,有兴趣的朋友学些下。
    2018-01-01
  • 微信小程序开发打开另一个小程序的实现方法

    微信小程序开发打开另一个小程序的实现方法

    这篇文章主要介绍了微信小程序开发打开另一个小程序的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 微信小程序倒计时功能实现代码

    微信小程序倒计时功能实现代码

    倒计时功能在项目开发中经常会用到,今天小编给大家介绍下微信小程序倒计时功能实现代码,需要的朋友参考下吧
    2017-11-11
  • 深入了解javascript 数组的sort方法

    深入了解javascript 数组的sort方法

    在javascript中,数组对象有一个有趣的方法sort,它接收一个类型为函数的参数作为排序的依据。这意味着开发者只需要关注如何比较两个值的大小,而不用管排序这件事内部是如何实现的
    2018-06-06
  • bootstrapfileinput实现文件自动上传

    bootstrapfileinput实现文件自动上传

    这篇文章主要介绍了bootstrapfileinput实现文件自动上传,bootstrap fileinput插件对多种类型的文件提供文件预览,并且提供了多选等功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript开发者必备的10个Sublime Text插件

    JavaScript开发者必备的10个Sublime Text插件

    Sublime Text几乎是任何开发者在其工具箱的必备应用程序,这篇文章主要介绍了JavaScript开发者必备的10个Sublime Text插件,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 对采用动态原型方式无法展示继承机制得思考

    对采用动态原型方式无法展示继承机制得思考

    今天看书,作者讨论到能否采用动态原型方法展示继承机制,给出的答案是:不能。原因是prototype对象的唯一性。看下面代码(这段代码不正确,却值得研究)
    2009-12-12
  • js 获取屏幕各种宽高的方法(浏览器兼容)

    js 获取屏幕各种宽高的方法(浏览器兼容)

    js 获取屏幕各种宽高的方法(浏览器兼容),需要的朋友可以参考一下
    2013-05-05
  • javascript中layim之查找好友查找群组

    javascript中layim之查找好友查找群组

    这篇文章主要介绍了javascript中layim之查找好友查找群组,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • 基于JS实现计算24点算法代码实例解析

    基于JS实现计算24点算法代码实例解析

    这篇文章主要介绍了基于JS实现计算24点算法代码实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07

最新评论