一个获取第n个元素节点的js函数
2014-09-02 00:00
597 查看
一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善
演示:html
js:
演示: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));//选取第二个元素
相关文章推荐
- 一个获取第n个元素节点的js函数
- js获取一个元素节点的子节点的方法(包括非文本节点)
- Js获取HTML DOM节点元素
- js 中获取 某一个控件位置的函数及用法
- js -- dom -- JS获取HTML DOM节点元素
- js中一个函数获取另一个函数返回值问题探讨
- [西山居笔试]分别写一个宏和函数来获取元素个数 如count(a) 会得到a数组元素个数
- Js获取HTML DOM节点元素
- 一个简单的js获取url参数的函数
- 转一个js类型判断函数,支持返回dom 元素的类型,像HTMLBody
- JS获取节点的兄弟,父级,子级元素
- js中一个函数获取另一个函数返回值问题探讨
- Js 获取HTML DOM节点元素的方法小结
- 在js函数中获取页面元素的值
- JS获取节点的兄弟,父级,子级元素
- 实现一个获取元素样式的函数getStyle
- [疑问]作了一个用Js遍历树节点的函数,后来发现一个问题!
- Js 获取HTML DOM节点元素的几种方法
- js获取元素样式属性值 - 较为灵活的函数
- js中一个函数获取另一个函数返回值问题