HTML DOM childNodes用法及代碼示例

childNodes屬性返回節點的子節點作為nodeList對象。空白和注釋也被視為節點。從0開始，為節點分配索引號。可以使用節點列表上的索引號執行搜索和排序操作。

用法:

elementNodeReference.childNodes;

返回值：它返回特定節點的子節點的集合作為nodeList對象(包括空白，文本和注釋，它們被視為節點)。

屬性：

length property:它確定對象的子節點數。這是一個隻讀屬性。句法：

elementNodeReference.childNodes.length;

elementNodeReference.childNodes[index_number].length;

示例1：顯示長度屬性。

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1><center>Geeks 
    <button onclick="node()">Press</button> 
   </center> </h1> 
  
        <h4>Clicking on the 'Press' button will return  
          the length of childNodes[0].</h4> 
  
    <p id="gfg"></p> 
  
    <script> 
        function node() { 
            
            // Return the length of child node. 
            var c = document.getElementsByTagName( 
              "BUTTON")[0]; 
            var x = c.childNodes[0].length; 
            document.getElementById("gfg").innerHTML = x; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

nodeName property:它返回指定節點的名稱。如果節點是元素節點，則將返回標簽名稱，否則，如果節點是屬性節點，則將返回屬性名稱，否則將返回不同的節點類型，並返回不同的名稱。

用法:

elementNodeReference.childNodes[index_number].nodeName;

示例2：顯示nodeName屬性

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1><center>Geeks  
      <button onclick="node()">Press 
      </button></center> </h1> 
  
        <h4>Clicking on the 'Press' button will  
          return the node name of childNodes[0].</h4> 
  
    <p id="gfg"></p> 
  
    <script> 
        function node() { 
            
            //  Return the name of specific node name. 
            var c = document.getElementsByTagName( 
              "BUTTON")[0]; 
            var x = c.childNodes[0].nodeName; 
            document.getElementById("gfg").innerHTML = x; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

nodeValue property:它設置或返回指定節點的節點值。

用法:

elementNodeReference.childNodes[index_number].nodeValue;

示例3：顯示nodeValue屬性

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1><center>Geeks  
      <button onclick="node()">Press 
      </button></center> </h1> 
  
        <h4>Clicking on the 'Press' button will  
          return the node value of childNodes[0].</h4> 
  
    <p id="gfg"></p> 
  
    <script> 
        function node() { 
            
            
            // Return the node value. 
            var c = document.getElementsByTagName("BUTTON")[0]; 
            var x = c.childNodes[0].nodeValue; 
            document.getElementById("gfg").innerHTML = x; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在單擊按鈕之前：

單擊按鈕後：

瀏覽器支持：列出的瀏覽器支持DOM childNodes屬性：

穀歌瀏覽器
Firefox
IE瀏覽器
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自riarawal99大神的英文原創作品 HTML | DOM childNodes Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。