一個(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-12
uniapp插件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-12
JavaScript實(shí)現(xiàn)滑動(dòng)門效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑動(dòng)門效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
js實(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ì)象類型數(shù)據(jù),則會(huì)涉及隱式轉(zhuǎn)換,那么就會(huì)調(diào)用toString()函數(shù)和valueOf()函數(shù),本文主要介紹了?js中toString()函數(shù)與valueOf()函數(shù)使用與區(qū)別,感興趣的可以了解一下2022-04-04
json前后端數(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

