Javascript - nœud enfant comte

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

J'ai besoin d'obtenir le nœud enfant longueur à l'aide d'id de l'élément. Mon code renvoie 7 comme un résultat, mais je n'ai que 3 nœuds.

double possible de l'Utilisation de javascript pour compter immédiate des éléments enfants de l'élément - s'il vous plaît utiliser la fonction de recherche avant de poser une nouvelle question.
J'accepte de vous.. Mais j'ai besoin de javascript réponse n'est pas jquery
Si vous lisez la réponse attentivement, vous verrez qu'il n'utilise pas jQuery à tous/

OriginalL'auteur Karthick V | 2012-08-02

  1. 19

    Ce que vous voulez est .children.length ou .childElementCount (non recommandé) depuis childNodes obtient tous childNodes, également du Texte-les Nœuds qui sont 4 dans votre cas (les retours à la ligne ().

    var temp = document.getElementById('element').parentNode;
child = temp.children;
console.log(child.length);
//or the following
console.log(temp.childElementCount);
    J'obtiens une erreur dans FF getChildren n'est pas une fonction
    utilisation .children ce sera de retour html-de la collecte et a un meilleur support. Voir docu ici
    une remarque importante: les enfants nous le droit de l'utiliser, mais il est buggé dans les anciennes IEs - il compte le nombre de nœuds de commentaires <!-- comment --> trop! Donc, être conscient de cela.
    Merci chris..mais qui a donné en bas de vote.Il fonctionne très bien pour moi
    probablement bc childElementCount n'est pas pris en charge par IE8, vous devrez compter sur children.length pour les anciens navigateurs

    OriginalL'auteur Christoph

  2. 6

    childNodes retourne les 3 éléments de la liste, le texte de leur contenu et les espaces entre eux (pas dans tous les navigateurs, tout de même). Trois alternatives:

    1. FF et Chrome: elem.childElementCount (3)

    2. IE (&& FF autant que je sache): elem.childNodes.length (===3)

    3. Vieux IE: elem.children.length

    sa fonctionne très bien Dans FF
    J'ai vérifié le childNodes.length, il ne fonctionne pas sous chrome (je ne sais pas ce que je pensais) édité ma réponse... aussi: Qui downvoted ma réponse, et pourquoi?
    il fonctionne très bien pour moi (chrome:temp.childElementCount) .. ne sais pas qui a voté.. Va donner un vote..Merci pour votre précieuse réponse
    juste pour info ce n'était pas moi
    Je n'ai aucun problème avec les downvotes, si j'ai dit quelque chose de mal. Il serait toutefois bon de savoir que mon erreur a été (le cas échéant). @Christophe: je ne suis pas d'accuser quelqu'un, et pour info: je n'ai pas downvote de dépit, si c'est ce que vous pensiez

    OriginalL'auteur Elias Van Ootegem

  3. 2

    La childrenNodes bien inclure tous les types de nœuds: TEXT_NODE, ELEMENT_NODE, COMMEN_NODE, etc....

    Vous devez compter le nombre d'éléments, ici, est un exemple de solution basé sur les DOM qui devrait fonctionner dans tous les moteurs:

    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

    MODIFIER

    De même, si vous voulez une fonction pour récupérer tous les enfants uniquement d'Éléments à l'aide de DOM, voici une fonction:

    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

    OriginalL'auteur Julien Ch.