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代码段中，由于1元素，我预计会span。在第二个代码段中，我期待2，因为不仅span元素，还有hi文本节点。

我误解了什么？

Answer 1

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

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

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

<p id="child">
- <p id="grandchild">
  - 文字节点：hi

childNodes仅包含直接后代，每次child的直接子项为grandchild。

Answer 2

子节点仅指代。

下的直接节点

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

Answer 3

您使用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);

需要帮助计算childNodes

3 个答案: