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


Posted in Javascript onSeptember 02, 2014

一个获取第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));//选取第二个元素
Javascript 相关文章推荐
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 #Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 #Javascript
JavaScript判断文件上传类型的方法
Sep 02 #Javascript
JavaScript中九种常用排序算法
Sep 02 #Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 #Javascript
解决jquery版本冲突的有效方法
Sep 02 #Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 #Javascript
You might like
精通php的十大要点(上)
2009/02/04 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
php中session退出登陆问题
2014/02/27 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
vue使用video.js进行视频播放功能
2019/07/18 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
python实现数独算法实例
2015/06/09 Python
python实现自动发送邮件
2018/06/20 Python
Python语言快速上手学习方法
2018/12/14 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
竞争上岗演讲稿范文
2014/05/12 职场文书
工地安全质量标语
2014/06/07 职场文书
公司周年庆典标语
2014/10/07 职场文书
四年级作文之植物
2019/09/20 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫