JavaScript獲取父元素下子元素節點

admin發表於2018-07-06
JavaScript

本章節分享一段程式碼例項，它能夠獲取父元素下指定的子元素節點。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  list-style:none;
  font-size:12px;
}
</style>
<script type="text/javascript">
function nth(parent,ele,num){
  var _ele=Array.prototype.slice.call(parent.childNodes),eleArray=[];
  for(var index= 0,len=_ele.length;index<len;index++){
    if(_ele[index].nodeType==1){
      eleArray.push(_ele[index]);
    }
  }
  if(arguments.length===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{
    _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));
    return _ele[num];
  }
}
 
window.onload=function(){
  var list=document.getElementById("list");
  console.log(nth(list,"li",2).innerHTML);
  console.log(nth(list,"button",3).innerHTML)
  console.log(nth(nth(list,"li",1),"button",1).innerHTML);
  console.log(nth(nth(list,"li",1),"button"));
  console.log(nth(list,2));
}
</script>
</head>
<body>
<ul id="list">
  <li>1<button>a</button></li>
  <li>2<button>n</button><button>t</button></li>
  <p>螞蟻部落</p>
  <li>3<button>z</button></li>
  <li>4<button>o</button></li>
  <li>5<button>n</button></li>
  <li>6<button>e</button></li>
</ul>
</body>
</html>

一.程式碼註釋:

（1）.function nth(parent,ele,num){}，此方法實現獲取子元素的功能，第一個引數是父元素物件，第二個引數規定要獲取子元素的型別，第三個引數規定獲取子元素的索引值。

（2）.var _ele=Array.prototype.slice.call(parent.childNodes)，將父元素的子節點儲存在一個新的陣列中。

（3）.eleArray=[]，宣告一個空陣列。

（4）.for(var index= 0,len=_ele.length;index<len;index++){

  if(_ele[index].nodeType==1){

    eleArray.push(_ele[index]);

  }

}遍歷陣列，其實就是父元素的每一個子節點。

如果是元素節點，那麼久將其存入eleArray陣列。

（5）.if(arguments.length===2){},判斷是否為函式傳遞了兩個引數。

（6）.if(typeof arguments[1]==="string"){

  _ele=Array.prototype.slice.call(parent.getElementsByTagName(arguments[1]));

  return _ele;

}，如果第二個引數的型別是字串，那麼第二個引數傳遞的就是元素型別，這個時候獲取的是父元素下所有指定型別的元素，並存入陣列，最後返回此陣列。

（7）.else if(typeof arguments[1]==="number"){

  return eleArray[arguments[1]];

}，如果第二個引數是數字型別，那麼返回的是父元素下一級子元素節點中指定索引的元素節點。

（8）.else{

  _ele=Array.prototype.slice.call(parent.getElementsByTagName(ele));

  return _ele[num];

}，如果傳遞的不是2個引數，那麼就是三個引數（其他的引數不做考慮）

那麼就會獲取所有的父節點下所有的指定型別的後代元素，然後並返回指定索引的元素。

二.相關閱讀:

（1）.slice()方法參閱javascript Array slice()一章節。

（2）.call()方法參閱js call()一章節。

（3）.nodeType參閱js nodeType一章節。

（4）.push()方法參閱javascript push()一章節。

（5）.arguments物件參閱javascript arguments一章節。

相關文章