一个获取第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 相关文章推荐
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
详解JS数值Number类型
Feb 07 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
详解PHP数组赋值方法
2015/11/07 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
python调用新浪微博API项目实践
2014/07/28 Python
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
python学生信息管理系统实现代码
2019/12/17 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
python属于解释语言吗
2020/06/11 Python
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
工艺工程师工作职责
2013/11/23 职场文书
加拿大探亲邀请信
2014/01/28 职场文书
理财投资建议书
2014/03/12 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
创业计划书之甜品店
2019/09/18 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang