一個(gè)獲取第n個(gè)元素節(jié)點(diǎn)的js函數(shù)
一個(gè)獲取第n個(gè)元素節(jié)點(diǎn)的函數(shù),現(xiàn)在只能通過(guò)html標(biāo)簽獲取元素,功能還不完善
演示: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é)點(diǎn) * @param ele要選取的元素標(biāo)簽 * @param num第幾個(gè)元素 * @return {*} */ function nth(parent,ele,num){ var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[]; //將父節(jié)點(diǎn)的子節(jié)點(diǎn)轉(zhuǎn)換成數(shù)組_ele;eleArray為只儲(chǔ)存元素節(jié)點(diǎn)的數(shù)組 for(var i= 0,len=_ele.length;i<len;i++){ if(_ele[i].nodeType==1){ eleArray.push(_ele[i]);//過(guò)濾掉非元素節(jié)點(diǎn) } } if(arguments.length===2){ //如果只傳入2個(gè)參數(shù),則如果第二個(gè)參數(shù)是數(shù)字,則選取父節(jié)點(diǎn)下的第幾個(gè)元素 //如果第二個(gè)參數(shù)是字符串,則選取父節(jié)點(diǎn)下的所有參數(shù)代表的節(jié)點(diǎn) 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ù)齊全,則返回第幾個(gè)某節(jié)點(diǎn),索引從0開(kāi)始 _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele)); return _ele[num]; } } /* 測(cè)試 */ var list=document.getElementById("list"); console.log(nth(list,"li",2).innerHTML);//選取第三個(gè)li元素 console.log(nth(list,"button",3).innerHTML)//選取第四個(gè)按鈕 console.log(nth(nth(list,"li",1),"button",1).innerHTML);//選取第二個(gè)li下的第二個(gè)按鈕 console.log(nth(nth(list,"li",1),"button"));//選取第二個(gè)li下的所有按鈕 console.log(nth(list,2));//選取第二個(gè)元素
- JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法
- JS獲取節(jié)點(diǎn)的兄弟,父級(jí),子級(jí)元素的方法
- js遍歷子節(jié)點(diǎn)子元素附屬性及方法
- js創(chuàng)建元素(節(jié)點(diǎn))示例
- javascript刪除一個(gè)html元素節(jié)點(diǎn)的方法
- js 獲取元素所有兄弟節(jié)點(diǎn)的實(shí)現(xiàn)方法
- JS 使用for循環(huán)遍歷子節(jié)點(diǎn)查找元素
- JavaScript實(shí)現(xiàn)獲取某個(gè)元素相鄰兄弟節(jié)點(diǎn)的prev與next方法
- JavaScript 獲取元素在父節(jié)點(diǎn)中的下標(biāo)(推薦)
- javascript基礎(chǔ)之查找元素的詳細(xì)介紹(訪問(wèn)節(jié)點(diǎn))
- javascript刪除元素節(jié)點(diǎn)removeChild()用法實(shí)例
- JS簡(jiǎn)單添加元素新節(jié)點(diǎn)的方法示例
相關(guān)文章
JS自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用(兩種場(chǎng)景)
在WEB程序開(kāi)發(fā)中經(jīng)常會(huì)見(jiàn)到用倒計(jì)時(shí)限制用戶對(duì)表單的操作,希望用戶在規(guī)定的時(shí)間內(nèi)閱讀完協(xié)議信息才允許用戶繼續(xù)下一步操作,本文通過(guò)兩種場(chǎng)景分析js實(shí)現(xiàn)自動(dòng)倒計(jì)時(shí)30秒后按鈕才可用,小伙伴快來(lái)學(xué)習(xí)吧2015-08-08關(guān)于Javascript模塊化和命名空間管理的問(wèn)題說(shuō)明
最近閑下來(lái)的時(shí)候,稍微想了想這個(gè)問(wèn)題。關(guān)于Javascript模塊化和命名空間管理2010-12-12uniapp插件uview下表單無(wú)法動(dòng)態(tài)校驗(yàn)的問(wèn)題解決
最近項(xiàng)目中用到了uview?在做表單時(shí)用到了校驗(yàn),發(fā)現(xiàn)校驗(yàn)不友好的結(jié)果,下面這篇文章主要給大家介紹了關(guān)于uniapp插件uview下表單無(wú)法動(dòng)態(tài)校驗(yàn)的問(wèn)題解決,需要的朋友可以參考下2022-12-12JavaScript實(shí)現(xiàn)滑動(dòng)門(mén)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑動(dòng)門(mén)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01js實(shí)現(xiàn)將json數(shù)組顯示前臺(tái)table中
本文主要介紹了把JSON數(shù)組顯示在前臺(tái)的table中的方法。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別
在等于運(yùn)算符中,如果比較的內(nèi)容包含對(duì)象類(lèi)型數(shù)據(jù),則會(huì)涉及隱式轉(zhuǎn)換,那么就會(huì)調(diào)用toString()函數(shù)和valueOf()函數(shù),本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別,感興趣的可以了解一下2022-04-04json前后端數(shù)據(jù)交互相關(guān)代碼
本篇文章給大家分享了關(guān)于json前后端數(shù)據(jù)交互方法實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn)內(nèi)容,有興趣的讀者們可以參考學(xué)習(xí)下。2018-09-09收藏Javascript中常用的55個(gè)經(jīng)典技巧
收藏Javascript中常用的55個(gè)經(jīng)典技巧...2007-08-08