So wählen Sie alle Links innerhalb des Navigationselements aus

Question

Ich habe eine Seite mit vielen Links, aber ich möchte js verwenden, wählen Sie alle Links innerhalb des Nav-Tags aus und weisen Sie sie einer Variablen namens navigationLinks zu. Gibt es eine Möglichkeit, dies zu tun, ohne allen Links eine Klasse zuzuweisen. `

<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> 

Hier ist die js:

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

Danke.

Answer 1

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

Aber denken Sie daran, es ist ein NodeList-Objekt.

Answer 2

Ihr gegeben JavaScript:

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

falsch ist, verwenden [0] nach document.getElementsByTagName('nav') das erste Navigations-Element auszuwählen.

Mit diesem Code eine Klasse my-class jedem <a> Link in 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>

Hoffnung zuordnen, können Sie dies erforderlich ist.

Answer 3

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

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

, wenn Sie mehrere nav-Tags haben, werden Sie eine Schleife müssen sie entsprechend