獲取第一級指定型別子元素程式碼例項

admin發表於2017-03-31
型別

本章節介紹一下如何獲取父元素下第一級指定型別的子元素。

可能不少朋友首先想到使用obox.getElementByTageName("div")這種方式來獲取元素，但是這種方式獲取的是所有的後代元素，並不僅僅是一級子元素，下面就通過程式碼例項介紹如何實現標題中的需求。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  var childNodes=obox.childNodes;
  var num=0;
  for(var index=0;index<childNodes.length;index++){
    if(childNodes[index].nodeType==1&&childNodes[index].tagName=="DIV"){
      num++;
    }
  }
  oshow.innerHTML=num;
}
</script>
</head> 
<body> 
<div id="box">
  <div>
    <div>二級子元素</div>
    <div>二級子元素</div>
  </div>
  <div>一級子元素</div>
  <div>一級子元素</div>
</div>
<div id="show"></div>
</body> 
</html>

上面的程式碼實現了獲取一級div子元素的效果，下面簡單介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

2.var obox=document.getElementById("box")，獲取id屬性值為box的元素物件。

3.var oshow=document.getElementById("show")，獲取id屬性值為show的元素物件。

4.var childNodes=obox.childNodes，獲取obox元素下的所有子節點。

5.var num=0，宣告一個變數用來儲存指定型別子節點的數目。

6.for(var index=0;index<childNodes.length;index++){

  if(childNodes[index].nodeType==1&&childNodes[index].tagName=="DIV"){

    num++;

  }

}，遍歷每一個子節點，然後獲取獲元素節點，並且標籤型別是div，滿足條件num就加1.

二.相關閱讀:

1.childNodes可以參閱js childNodes一章節。

2.nodeType屬性可以參閱js nodeType一章節。

3.tagName屬性可以參閱javascript tagName一章節。

相關文章