Нужна помощь счетные 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 я ожидал 1 из-за элемента span. Во втором фрагменте я ожидал 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> 

Если вы хотите 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)); 

Answer 2

Вы используете идентификаторы ненадлежащим образом. Вы хотите присвоить им классы, если вы считаете классы. Каждый идентификатор должен быть уникальным в 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); 

Answer 3

иерархии в первом примере выглядит следующим образом:

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

Иерархия во втором примере выглядит следующим образом:

• <p id="child">
  • <p id="grandchild">
    • текстовый узел: hi

childNodes содержит только прямых потомков, и каждый раз, только child является прямым ребенком grandchild.