一个获取第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 14 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
javascript实现拖放效果
Dec 16 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
Python中Django 后台自定义表单控件
2017/03/28 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
工作个人的自我评价
2014/01/14 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
见习报告格式要求
2014/11/04 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android