一个获取第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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
javascript网页关键字高亮代码
Jul 30 Javascript
web 页面分页打印的实现
Jun 22 Javascript
在JavaScript中使用timer示例
May 08 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
一篇文章看懂JavaScript中的回调
Jan 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
简明json介绍
2008/09/28 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
联想新西兰官方网站:Lenovo New Zealand
2018/10/30 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
Linux的文件类型
2012/03/07 面试题
保险公司开门红口号
2014/06/21 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python