Necesito ayuda para contar childNodes

Con este HTML:

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

Y este JavaScript:

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

yo obtengo 1. With this HTML instead:

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

yo obtengo 1 as well. I was expecting 2.

In the first HTML snippet, I expected 1 debido a la span element. In the second snippet, I was expecting 2 because there's not just the span element, but also the hi nodo de texto.

¿Qué estoy entendiendo mal?

preguntado el 01 de febrero de 12 a las 03:02

What did you get for the second one? One? Three? -

I got one child node for each of the first two lines -

I edited your question to hopefully disambiguate what you meant. Is my edit correct? -

@icktoofay yes you did, thanks kind sir - upvote for you -

3 Respuestas

Child nodes refers only to the direct nodes under.

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

If you want to countall the descendants you have to do it recursively, please see below sample:

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

Respondido 01 Feb 12, 07:02

you don't need a function to do this, check my answer stackoverflow.com/a/9090416/908879 - ajax333221

based on my test, getElementsByTagName will only return the number of elements with <tag> it will not count #text like "hi". - jerjer

I misunderstood the question. Thanks to clarify that, I have now deleted my answer - ajax333221

The hierarchy in the first example looks like this:

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

The hierarchy in the second example looks like this:

  • <p id="child">
    • <p id="grandchild">
      • nodo de texto: hi

childNodes only contains direct descendants, and each time, child's only direct child is grandchild.

Respondido 01 Feb 12, 07:02

You're using IDs improperly. You want to assign them classes, if you're counting classes. Each ID needs to be unique in the DOM

Try something to the tune of:

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

Respondido 01 Feb 12, 07:02

The first two lines are on separate HTML pages. - icktoofay

@Tim: If you read the question, it refers to two examples. It contains a snippet of JavaScript code and two similar, though different, pieces of HTML code. They're kind of smushed together, but it only makes sense that they'd be placed in separate pages while testing, given that they're illegal when together. - icktoofay

@icktoofay It made no sense to me that way. The way I read it, it looks like they're on the same page. I don't think that's how the OP meant it based on his edit. - Tango bravo

@Tim: I think the edit was to make the question make sense should you decide to interpret it as that both were on the same page. - icktoofay

@Tim: I have edited the question to reflect what I believed the question to be and left a comment to the user asking if the edit is correct. I hope this clears things up. - icktoofay

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.