需要帮助计数的childNodes

有了这个HTML：需要帮助计数的childNodes

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

我误解了什么？

来源

2012-02-01 user784637

你是怎么得到的第二个？一？三？ – 2012-02-01 03:21:58

我为前两行中的每一行都获得了一个子节点 – user784637 2012-02-01 03:24:11

我编辑了您的问题，希望能够消除您的含义。我的编辑是否正确？ – icktoofay 2012-02-01 03:39:44

子节点只指向下的直接节点。

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

如果你想countall你必须递归做的后代，请参见下面的示例：

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

来源

2012-02-01 03:25:01 jerjer

你不需要一个函数来做到这一点，检查我的答案http://stackoverflow.com/a/9090416/908879 – ajax333221 2012-02-01 03:44:17

基于我的测试，getElementsByTagName将只返回与元素的数量它不会计数＃文本像“嗨”。 – jerjer 2012-02-01 03:48:59

我误解了这个问题。谢谢澄清，我现在已经删除了我的答案 – ajax333221 2012-02-01 03:58:21

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

来源

2012-02-01 03:21:40 Tim

我很确定这不是确切的DOM标记。 – 2012-02-01 03:22:26

前两行在单独的HTML页面上。 – icktoofay 2012-02-01 03:22:47

你怎么知道的？ – Tim 2012-02-01 03:24:00

在第一个例子中的层次结构是这样的：

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

在第二实施例中的层次结构是这样的：

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

childNodes只包含直系后代，并且每次child的唯一直接子代为grandchild。

来源

2012-02-01 03:24:42 icktoofay

需要帮助计数的childNodes

回答

相关问题