一个获取第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学习笔记之JS对象
Jan 22 Javascript
javascript 闭包详解
Jul 02 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
前端插件之Bootstrap Dual Listbox使用教程
Jul 23 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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若干单维数组遍历方法的比较
2011/09/20 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
JS 自动安装exe程序
2008/11/30 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python实现图片文件批量重命名
2020/03/23 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python接口测试文件上传实例解析
2020/05/22 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
python else语句在循环中的运用详解
2020/07/06 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
python实现移动木板小游戏
2020/10/09 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
什么是网络协议
2016/04/07 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
个人先进事迹材料
2014/12/29 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
学习计划是什么
2019/04/30 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电