JavaScript: не может получить доступ к childNode одной итерации nodeList

Question

Учитывая эту разметку:

<ul id="navtabs">
  <li><a onClick="someFunction();" href="#">Link</a></li>
  <li><a onClick="someFunction();" href="#">Link</a></li>
</ul>

и эта функция:

function someFunction(){
  navList=document.getElementById('navtabs').childNodes;
  for(i=0;i<navList.length;i++){
    navList[i].childNodes[0].className='fgf';
  }
}

я ожидаю, что класс каждого якоря будет изменен, однако при запуске функции я получаю:

Error: navList[i].childNodes[0] is undefined

Когда я использую:

navList[i].className='fgf';

Вместо приведенного выше кода имя класса элемента списка изменяется, как и ожидалось.

Как я могу получить доступ к childNode childNode через цикл, как показано в приведенной выше функции?

Спасибо.

Answer 1

childNodes скорее всего даст вам текстовые узлы, а также элементы dom, поэтому вы получаете эту ошибку.В вашем цикле navList[i] иногда является текстовым узлом без собственных дочерних элементов, поэтому, конечно, navList[i].childNodes[0] равен undefined

Вместо использования childNodes вы можете сделать

navList=document.getElementById('navtabs').children;

, чтобы просто получить дочерний элемент .Но я бы рекомендовал быть еще более конкретным с getElementsByTagName

function someFunction() {
    navList = document.getElementById('navtabs').getElementsByTagName("li");
    for(i = 0; i < navList.length; i++){
        navList[i].getElementsByTagName("a")[0].className='fgf';
    }
}

Answer 2

Вы ищете <a> элемент детей-

function someFunction(){
  var navList=document.getElementById('navtabs').getElementsByTagName('a');
  for(i=0;i<navList.length;i++){
    navList[i]className='fgf';
  }
}