一个获取第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中原型继承中的一点思考
Jul 25 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
PHP代码加密的方法总结
2020/03/13 PHP
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python django生成迁移文件的实例
2019/08/31 Python
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
文员自我评价怎么写
2013/09/19 职场文书
销售员自我评价怎么写
2013/09/19 职场文书
在求职信中如何凸显个人优势
2013/10/30 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
学习三严三实心得体会
2014/10/13 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
安全生产培训心得体会
2016/01/18 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python