I have a page with many links but I want to use js select all the links inside of the nav tag and assign them to a variable named navigationLinks. Is there a way to do this without assigning a class to all the links. `

<nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>   

Here is the js:

let navigationLinks = document.getElementsByTagName('nav');

Thank you.

I have a page with many links but I want to use js select all the links inside of the nav tag and assign them to a variable named navigationLinks. Is there a way to do this without assigning a class to all the links. `

<nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>   

Here is the js:

let navigationLinks = document.getElementsByTagName('nav');

Thank you.

• javascript

• Do you have control over the html of it? If so you could add an id or class to the nav and use the .children(); method ( api.jquery./children ) You could do it without an id too and just grab the tag... but if you ever put another nav element on your page it could get messy. If you have control over the html, no matter what method you use I'd remend using an id or class something as opposed to just referencing the tag. – DawnPatrol Commented Dec 11, 2016 at 10:16
• navigationLinks.getElementsByTagName('a'); – fingerpich Commented Dec 11, 2016 at 10:17

3 Answers 3

let navigationLinks = document.querySelectorAll('nav a');

But remember it's a NodeList object.

Your given JavaScript:

let navigationLinks = document.getElementsByTagName('nav');

is wrong, use [0] after document.getElementsByTagName('nav') to select the first navigation-element.

Use this code to assign a class my-class to every <a> link inside nav

let navigationLinks = document.getElementsByTagName('nav')[0];
let button = document.getElementsByTagName('button')[0];

var ul = navigationLinks.children[0];
var ulChilds = ul.children;
function insertClass() {
    for (var x=0;x < ulChilds.length;x++) {
        ulChilds[x].className += ' my-class';
    }
}
button.onclick = insertClass;

.my-class {
    background: yellow; /*Just testing class*/
}

<nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
<button>Add my-class</button>

Hope, you needed this.

let navElement = document.getElementsByTagName('NAV');

let navigationLinks = navElement[0].getElementsByTagName('A');

if you are having multiple nav tags you may need to loop it accordingly