Pourquoi childNodes [i] dans la fonction renvoie undefined mais alerte un objet?

Question

Eh bien, je suis ecris mon propre getElementByClassName et voici mon problème:

function getElementByClassName(elemento,clase){ 
     var i = 0; 
     if(elemento.hasChildNodes()){ 
      while(elemento.childNodes[i]){ 
       if(elemento.childNodes[i].nodeType != 3){ 
        if(elemento.childNodes[i].className == clase){ 
         return elemento.childNodes[i]; // <---- This is my problem, change to alert 
        } 
        else { 
        getElementByClassName(elemento.childNodes[i],clase); 
        } 
       } 

       i++ 
      } 
     } 
} 

var div = getElementByClassName(document.body,"foo"); 

alert(div); 

Il alerte non défini, mais si je mets (en fonction) alerte nous avons signalé [objectHTMLDivElement] et non définis, alors pourquoi cette undefined si cela reconnaît que c'est un [objectHTMLDivElement] avec alerte?

Answer 1

Pour répondre à votre question, la raison pour laquelle votre implémentation ne fonctionne pas est que vous appelez récursivement votre fonction dans la clause else et que vous ne faites rien avec la valeur de retour. C'est pourquoi votre code recherche l'objet, mais il ne sera jamais renvoyé.

Ceci est une version légèrement retravaillée, mais il y a aussi d'autres limitations à votre approche, l'une étant que des éléments avec plusieurs classes ne seront pas trouvés (c'est-à-dire <div class="foo bar"> ne seront pas retournés). À moins que vous ne fassiez cela comme un exercice d'apprentissage, je suggère d'aller avec une implémentation existante, comme le lien dans la réponse de Yoni.

function getElementByClassName(elemento, clase) 
{ 
    var i = 0; 
    if (elemento.hasChildNodes()) 
    { 
     while (elemento.childNodes[i]) 
     { 
      if (elemento.childNodes[i].nodeType != 3) 
      { 
       if (elemento.childNodes[i].className == clase) 
        return elemento.childNodes[i]; 
       else 
       { 
        var result = getElementByClassName(elemento.childNodes[i], clase); 
        if (result != null) 
         return result; 
       } 
      } 
      i++; 
     } 
    } 
    return null; 
}