一个获取第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 跨域访问解决方案
Feb 14 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
全面理解闭包机制
Jul 11 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
js实现按座位号抽奖
Apr 05 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
Vue精简版风格概述
Jan 30 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
浅谈JavaScript 声明提升
2020/09/14 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python多线程分块读取文件
2019/08/29 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
Java基础面试题
2014/07/19 面试题
幼儿园大班教学反思
2014/02/10 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
保险公司增员口号
2015/12/25 职场文书
《折线统计图》教学反思
2016/02/22 职场文书