getElementByTagName()獲取一級子元素

antzone發表於2017-03-26

標題是說使用getElementByTagName()函式獲取指定元素的一級指定型別的子元素集合，其實這只是一個噱頭，因為確實有人問過如何使用此方法來實現此功能，但是感覺還是換一種思路實現的好，下面就介紹一下如何獲取指定元素下的一級指定型別的子元素。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  <html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  var eles=obox.children;
  var arr=[];
  for(var index=0;index<eles.length;index++){
    if(eles[index].tagName="LI"){
      arr.push(eles[index]);
    }
  }
  for(var index=0;index<arr.length;index++){
    oshow.innerHTML=oshow.innerHTML+arr[index].innerHTML;
  }
}
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <span>螞蟻部落五</span>
</ul>
</body> 
</html>

上面的程式碼實現了我們的要求，實現了後去一級指定型別子元素效果。

一.實現原理:

實現原理其實非常的簡單，children屬效能夠獲取指定元素的一級子元素節點，然後在通過for迴圈遍歷每一個子元素，判斷是否是指定的型別標籤，如果是則存入陣列，程式碼比較簡單這裡就不多介紹了。

二.相關閱讀:

1.children屬性可以參閱javascript children一章節。

2.tagName屬性可以參閱javascipt tagName一章節。

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

4.innerHTML屬性可以參閱js innerHTML一章節。

相關文章