함수의 childNodes [i]가 undefined를 반환하지만 객체에 경고하는 이유는 무엇입니까?

Question

글쎄, 난 내 자신의 getElementByClassName을을 writting있어이 내 문제입니다 :

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

그것은 정의되지 않은 경고,하지만 난 (함수) 넣을 경우이 경고 [objectHTMLDivElement]와 정의되지 않은, 그래서 이것은 정의되지 않은 반환 왜 경고 이 항목이 경고가있는 [objectHTMLDivElement]임을 인식한다면?

Answer 1

귀하의 질문에 대답하기 위해 구현이 작동하지 않는 이유는 재귀 적으로 else 절에서 함수를 호출하고 반환 값을 사용하지 않기 때문입니다. 그래서 코드가 객체를 찾는 것입니다.하지만 반환되는 일은 없습니다.

약간 재 작업 한 버전이지만 접근 방법에 다른 제한이 있습니다. 하나는 여러 클래스가있는 요소가없는 것입니다 (즉, <div class="foo bar">은 반환되지 않음). 학습 연습으로이 작업을 수행하는 경우가 아니면 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; 
}