一个获取第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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
深入理解js中this的用法
May 28 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
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 中dirname(_file_)讲解
2007/03/18 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python实现批量转换文件编码的方法
2015/07/28 Python
python中使用print输出中文的方法
2018/07/16 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
主管会计岗位责任制
2014/02/10 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
nginx内存池源码解析
2021/11/20 Servers
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技