一个获取第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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
web前端开发也需要日志
Dec 09 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
使用Vue开发一个实时性时间转换指令
Jan 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
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
JS实现复制功能
2017/03/01 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
大学生职业生涯规划书汇总
2014/03/20 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
股东大会通知
2015/04/24 职场文书
离婚协议书范文2016
2016/03/18 职场文书