is there any reason this chain does not work? It does not add the class:

document.getElementsByTagName('nav')[0].firstChild.className = "current"

It should return the first child of the nav element which is an <a> which does not happen.

Thanks for your help!

is there any reason this chain does not work? It does not add the class:

document.getElementsByTagName('nav')[0].firstChild.className = "current"

It should return the first child of the nav element which is an <a> which does not happen.

Thanks for your help!

• javascript

• Is the syntax at least correct? – cmplieger Commented Sep 11, 2012 at 1:45

4 Answers 4

That's because you have text nodes between nav and a. You can filter them by nodeType:

var childNodes = document.getElementsByTagName('nav')[0].childNodes;
for (var i = 0; i < childNodes.length; i++) {
    if (childNodes[i].nodeType !== 3) { // nodeType 3 is a text node
      childNodes[i].className = "current";  // <a>
      break;
    }        
}

It may seem strange but, for example, if you have the following markup:

<nav>
<a>afsa</a>
</nav>

Here's a DEMO.

Why does this happen? Because some browsers may interpret the space between <nav> and <a> as an extra text node. Thus, firstChild will no longer work since it'll return the text node instead.

If you had the following markup, it'd work:

<nav><a>afsa</a></nav>

You can simply document.querySelectorAll to select the list. use "firstElementChild" to get first child node and add class.

 const firstChild = document.querySelectorAll('nav').firstElementChild;
 firstChild.classList.add('current');

The statement:

document.getElementsByTagName('nav')[0].firstChild.className = "current"

is somewhat fragile as any change in the assumed document structure breaks your code. So more robust do do something like:

var links, 
    navs = document.getElementsByTagName('nav');

if (navs) links = nav[0].getElementsByTagName('a');

if (links) links[0].className = links[0].className + ' ' + 'current';

You should also have robust addClassName and removeClassName functions.

Jquery can make this very easy:

$("#nav:first-child").addClass("current");