一个获取第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 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
JS实现一个简单的日历
Feb 22 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 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的历史和优缺点
2006/10/09 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
js setattribute批量设置css样式
2009/11/26 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python 多核并行计算的示例代码
2017/11/07 Python
django中send_mail功能实现详解
2018/02/06 Python
python实现自动发送邮件
2018/06/20 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
高中军训感想300字
2014/03/04 职场文书
2015年消防工作总结
2015/04/24 职场文书
安全学习心得体会范文
2016/01/18 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL