需要帮助计算子节点

Need help counting childNodes

本文关键字：子节点 计算 帮助      更新时间：2023-09-26

使用此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文本节点。

我误解了什么？

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

<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));

第一个示例中的层次结构如下所示：

  • <p id="child">
    • <p id="grandchild">

第二个例子中的层次结构如下：

  • <p id="child">
    • <p id="grandchild">
      • 文本节点：hi

childNodes只包含直接子代，每次child的唯一直接子代是grandchild。

您使用ID不正确。如果你在计算类的话，你想给它们分配类。每个ID在DOM 中都必须是唯一的

尝试一些调谐的东西：

<p id ="child1"><span id="grandchild"></span></p> //1 child node
<p id ="child2"><span id="grandchild">hi</span></p> //1 child node
var x = document.getElementById("child2").childNodes;
document.write(x.length);
相关文章：