Question

Given this markup:

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

and this function:

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

my expectaction is that the class of each anchor is changed, however, when the function runs I get:

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

When I use:

navList[i].className='fgf';

in lieu of the above code, the class name of the list item is changed as expected.

How can i access the childNode of the childNode through the loop as seen in the above function?

Thank you.

Answer 1

childNodes is likely giving you text nodes as well as dom elements, which is why you’re getting that error. In your loop, navList[i] is at times a text node with no children of its own, which is of course why navList[i].childNodes[0] is undefined

Instead of using childNodes you could do

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

to just get the child elements. But I would recommend being even more specific with getElementsByTagName

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