Javascript - número de hijos

Question

<ul> 
    <li>Array1</li> 
    <li>Array2</li> 
    <li id="element">Array3</li> 
</ul> 
<script> 
    var temp = document.getElementById('element').parentNode; 
    child = temp.childNodes; 
    console.log(temp.length); 
</script> 

Necesito obtener la longitud del nodo hijo usando el elemento id. Mi código devuelve 7 como resultado, pero tengo solo 3 nodos.

Answer 1

What lo que quiere es .children.length o .childElementCount (no recomendado) ya que childNodes obtiene todos childNodes, también Nodos de texto que son 4 en su caso (los saltos de línea).

var temp = document.getElementById('element').parentNode; 
child = temp.children; 
console.log(child.length); 
// or the following 
console.log(temp.childElementCount); 

Answer 2

childNodes devuelve los 3 elementos de la lista, su contenido de texto y el espacio en blanco entre ellos (aunque no en todos los navegadores). Tres alternativas:

1. FF y Chrome: elem.childElementCount (volverá 3)

2. IE (& & FF yo sepa): elem.childNodes.length (=== 3)

3. Antiguo IE: elem.children.length

Answer 3

La propiedad childrenNodes incluye todos los tipos de nodos: TEXT_NODE, EL EMENT_NODE, COMMEN_NODE, etc ....

Debe contar el número de elementos, aquí es an example solution basado en DOM que debería funcionar en todos los sistemas:

var temp = document.getElementById('element').parentNode; 
var children = temp.childNodes; 
console.log(children.length); // 7 

function countElements(children) { 
    var count=0; 
    for (var i=0, m=children.length; i<m; i++) 
    if (children[i].nodeType===document.ELEMENT_NODE) 
     count++; 
    return count; 
} 
console.info(countElements (children));​ // 3 

EDITAR

Del mismo modo si desea una función para recuperar todos los elementos secundarios solo con DOM, aquí hay una función:

function childElements(node) { 
    var elems = new Array(); 
    var children = node.childNodes; 

    for (var i=0,i < children.length ; i++) { 
     if (children[i].nodeType===document.ELEMENT_NODE) { 
      elems.push(children[i]); 
      return elems; 
      } 
     } 
    } 

console.info(childElements(temp).length);​ //3