Add Class To First Child Using Javascript

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

Solution 1:

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>

Solution 2:

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.

Solution 3:

Jquery can make this very easy:

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

Solution 4:

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