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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。