一个获取第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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
使用javascript访问XML数据的实例
Dec 27 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
JS随机数产生代码分享
Feb 24 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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+APACHE实现用户论证的方法
2006/10/09 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
javascript getElementsByTagName
2011/01/31 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
Vue3.0数据响应式原理详解
2019/10/09 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
javascript实现滚轮轮播图片
2020/12/13 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python列表推导式入门学习解析
2019/12/02 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
学风建设演讲稿
2014/09/12 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
党员评议自我评价
2015/03/03 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis