一個獲取第n個元素節(jié)點的js函數(shù)
更新時間:2014年09月02日 15:47:45 投稿:whsnow
這篇文章主要介紹了一個獲取第n個元素節(jié)點的js函數(shù),功能還不完善
,需要的朋友可以參考下
一個獲取第n個元素節(jié)點的函數(shù),現(xià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父節(jié)點 * @param ele要選取的元素標簽 * @param num第幾個元素 * @return {*} */ function nth(parent,ele,num){ var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[]; //將父節(jié)點的子節(jié)點轉(zhuǎn)換成數(shù)組_ele;eleArray為只儲存元素節(jié)點的數(shù)組 for(var i= 0,len=_ele.length;i<len;i++){ if(_ele[i].nodeType==1){ eleArray.push(_ele[i]);//過濾掉非元素節(jié)點 } } if(arguments.length===2){ //如果只傳入2個參數(shù),則如果第二個參數(shù)是數(shù)字,則選取父節(jié)點下的第幾個元素 //如果第二個參數(shù)是字符串,則選取父節(jié)點下的所有參數(shù)代表的節(jié)點 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{ //如果參數(shù)齊全,則返回第幾個某節(jié)點,索引從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));//選取第二個元素
您可能感興趣的文章:
- JS實現(xiàn)添加,替換,刪除節(jié)點元素的方法
- JS獲取節(jié)點的兄弟,父級,子級元素的方法
- js遍歷子節(jié)點子元素附屬性及方法
- js創(chuàng)建元素(節(jié)點)示例
- javascript刪除一個html元素節(jié)點的方法
- js 獲取元素所有兄弟節(jié)點的實現(xiàn)方法
- JS 使用for循環(huán)遍歷子節(jié)點查找元素
- JavaScript實現(xiàn)獲取某個元素相鄰兄弟節(jié)點的prev與next方法
- JavaScript 獲取元素在父節(jié)點中的下標(推薦)
- javascript基礎(chǔ)之查找元素的詳細介紹(訪問節(jié)點)
- javascript刪除元素節(jié)點removeChild()用法實例
- JS簡單添加元素新節(jié)點的方法示例
相關(guān)文章
關(guān)于Javascript模塊化和命名空間管理的問題說明
最近閑下來的時候,稍微想了想這個問題。關(guān)于Javascript模塊化和命名空間管理2010-12-12uniapp插件uview下表單無法動態(tài)校驗的問題解決
最近項目中用到了uview?在做表單時用到了校驗,發(fā)現(xiàn)校驗不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無法動態(tài)校驗的問題解決,需要的朋友可以參考下2022-12-12js實現(xiàn)將json數(shù)組顯示前臺table中
本文主要介紹了把JSON數(shù)組顯示在前臺的table中的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別
在等于運算符中,如果比較的內(nèi)容包含對象類型數(shù)據(jù),則會涉及隱式轉(zhuǎn)換,那么就會調(diào)用toString()函數(shù)和valueOf()函數(shù),本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別,感興趣的可以了解一下2022-04-04json前后端數(shù)據(jù)交互相關(guān)代碼
本篇文章給大家分享了關(guān)于json前后端數(shù)據(jù)交互方法實現(xiàn)的相關(guān)知識點內(nèi)容,有興趣的讀者們可以參考學習下。2018-09-09