js實現的獲取指定元素的節點封裝程式碼例項

admin發表於2017-03-28
JS封裝

對於dom元素的操作是javascript的根本目標，所以獲取要操作動科元素是先決條件。

本章節分享一段程式碼例項，它能夠獲取父元素下面指定的元素節點，希望能夠給需要的朋友帶來一定的幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function nth(parent,ele,num){
  var _ele=Array.prototype.slice.call(parent.childNodes);
  var 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 obox=document.getElementById("box");
  //選取第三個li元素
  console.log(nth(obox,"li",2).innerHTML);
  //選取第四個按鈕
  console.log(nth(obox,"button",3).innerHTML)
  //選取第二個li下的第二個按鈕
  console.log(nth(nth(obox,"li",1),"button",1).innerHTML);
  //選取第二個li下的所有按鈕
  console.log(nth(nth(obox,"li",1),"button"));
  //選取第二個元素
  console.log(nth(obox,2));
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落一<button>a</button></li>
  <li>螞蟻部落二<button>b</button><button>o</button></li>
  <p>螞蟻部落</p>
  <li>螞蟻部落三<button>c</button></li>
  <li>螞蟻部落四<button>d</button></li>
  <li>螞蟻部落五<button>e</button></li>
</ul>
</body>
</html>

上面的程式碼演示相關功能，在谷歌或者火狐的控制檯下能夠看到輸出結果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.function nth(parent,ele,num){}，此函式可以獲取指定的元素節點，第一個引數是父元素物件，第二個引數是要獲取元素節點的型別，第三個引數規定要獲取第幾個元素，第一個元素用0表示。2.var _ele=Array.prototype.slice.call(parent.childNodes)，將父元素的所有子節點集合轉換為一個陣列。

3.var 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)，如果arguments的length屬性值等於2，說明實際想nth()函式傳遞了2個引數。

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

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

  return _ele;

}如果第二個引數是字串，那麼就認為它規定的是標籤名稱，然後獲取父元素下所有的指定標籤元素，但是感覺這是有點問題的，因為getElementsByTagName()函式是獲取所有的後臺元素，所以最好使用childNodes獲取一級子節點，然後再遍歷每一個節點獲取指定標籤元素。

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

  return eleArray[arguments[1]];

}如果是數字的話，那麼就認為它規定的是要獲取第幾個元素節點。

8.else{

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

  return _ele[num];

}否則就認為傳遞三個引數，獲取第num個型別為ele的元素。

二.相關閱讀:

1.slice()函式可以參閱javascript Array slice()一章節。

2.call()函式可以參閱js call()一章節。

3.nodeType可以參閱js nodeType一章節。

4.push()函式可以參閱javascript push()一章節。

相關文章