javascript - 需要帮助计算 childNodes

Question

使用这个 HTML:

<p id="child"><span id="grandchild"></span></p>

还有这个 JavaScript:

var x = document.getElementById("child").childNodes;
console.log(x.length);

我得到 1。用这个 HTML 代替:

<p id="child"><span id="grandchild">hi</span></p>

我也得到 1。我期待 2。

在第一个 HTML 片段中，由于 span 元素，我期望 1。在第二个片段中，我期待 2 因为不仅有 span 元素，还有 hi 文本节点。

我误会了什么？

Answer 1

子节点仅指其下的直接节点。

<p id ="child"><span id="grandchild">hi</span></p> //1 child node

Only 1 child node is counted because "hi" is not a child of p#child it is the child of <span>

如果你想计算所有你必须递归计算的后代，请看下面的例子:

function countChild(p)
{
    var ctr = p.childNodes.length;
    for(var i=0;i<p.childNodes.length;i++)
    {     
       ctr += countChild(p.childNodes[i]);    
    }
    return ctr;    
}
var x = document.getElementById("child");
alert(countChild(x));