JavaScript 獲取所有後代元素節點

admin發表於2019-01-24
JavaScript

使用jQuery可以非常輕鬆的獲取指定元素節點的所有元素節點。

具體可以參閱jQuery find()一章節。

下面通過程式碼例項介紹一下如何利用JavaScript實現此功能。

程式碼例項如下:

[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");
  function findNodes(node){
    var arr=[];
    function done(node){
      if(node.children.length!=0){
        var childrenNodes=node.children;
        for(var index=0;index<childrenNodes.length;index++){
          arr.push(childrenNodes[index]);
          done(childrenNodes[index]);
        }
      }
    }
    done(node)
    return arr;
  }
  oshow.innerHTML=findNodes(obox).length;
}
</script>
</head>
<body>
<div id="show"></div>
<div id="box">
  <div>
    <ul>
      <li>螞蟻部落一</li>
      <li>螞蟻部落二</li>
      <li>螞蟻部落三</li>
    </ul>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

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

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

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

（4）.function findNodes(node){}，引數是一個元素節點物件，可以獲取它的所有後代元素節點。

（5）.var arr=[]，建立一個空陣列，用來儲存box元素下的所有子元素節點。

（6）.function done(node){}，使用遞迴的方式獲取元素的子元素，於是可以實現獲取所有的後代元素。（7）.f(node.children.length!=0)，如果node元素的子節點元素不為0.

（8）.var childrenNodes=node.children，獲取子節點元素的數目。

（9）.for(var index=0;index<childrenNodes.length;index++){

  arr.push(childrenNodes[index]);

  done(childrenNodes[index]);

}，使用for迴圈方式遍歷每一個子元素節點，並將當前子元素壓入陣列，並且遞迴呼叫done()函式。

（10）.done(node)，呼叫done()函式。

（11）.return arr，返回陣列物件。

（12）.oshow.innerHTML=findNodes(obox).length，將陣列長度寫入指定的div中。

二.相關閱讀:

（1）.children可以參閱JavaScript children一章節。

（2）.push()參閱JavaScript push()一章節。

（3）.innerHTML參閱JavaScript innerHTML一章節。

相關文章