JavaScript children和childNodes有什么区别

DOM childNodes属性 ： childNodes属性是JavaScript中Node的属性，用于返回一个包含子节点的NodeList。NodeList中的项是对象，而不是字符串，可以通过索引号访问。第一个子节点的索引号为 0 。

语法

element.childNodes

DOM children Property ： children 是一个元素的属性，返回该元素的子元素作为对象。

语法

element.children

children属性和childNodes属性的主要区别在于children属性作用于元素，childNodes属性作用于节点，包括文本节点和注释节点等非元素节点。

示例1： 此示例演示了childNodes属性的特性。

<h1 style="color:green">GeeksforGeeks</h1> 
<h2>childNodes</h2> 
<button onclick="childNode()"> 
    Try it 
</button> 
  
<p id="geek"></p> 
  
<script> 
    function childNode() { 
        //accessing all the child nodes present in our code 
        var childNode = 
            document.body.childNodes; 
        var string = ""; 
        var i; 
      
        for (i = 0; i < childNode.length; i++) { 
            string = string + childNode[i].nodeName + "<br>"; 
        } 
      
        //appending the child nodes to paragraph with id "geek" 
        document.getElementById( 
        "geek").innerHTML = string; 
    } 
</script>

输出：

JavaScript children和childNodes有什么区别

示例2： 此示例演示了子元素的属性。

<h1 style="color:green">GeeksforGeeks</h1> 
<h2>children</h2> 
  
<button onclick="myChildren()"> 
    Try it 
</button> 
  
<p id="geek"></p> 
  
<script> 
    function myChildren() { 
        var c = document.body.children; 
        var string = ""; 
        var i; 
        for (i = 0; i < c.length; i++) { 
            string = string + c[i].tagName + "<br>"; 
        } 
      
        document.getElementById( 
        "geek").innerHTML = string; 
    } 
</script>