Почему childNodes [i] в ​​функции возвращает undefined, но предупреждает объект?

Question

Ну, я пишу свой собственный getElementByClassName, и это моя проблема:

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"> не будет возвращено).Если вы просто не делаете это в качестве учебного упражнения, я предлагаю перейти к существующей реализации, например, по ссылке в ответе Йони.

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