nav要素内のすべてのリンクを選択する方法

Question

リンクが多数あるページがありますが、jsを使用してnavタグ内のすべてのリンクを選択し、それらをnavigationLinksという変数に割り当てたいとします。すべてのリンクにクラスを割り当てないでこれを行う方法はありますか？ここでは `

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

JSです：

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

ありがとうございました。

Answer 1

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

しかし、それはNodeListオブジェクトです。

Answer 2

あなたの与えられたJavaScript：

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

は、第1のナビゲーション要素を選択するために、document.getElementsByTagName('nav')後[0]を使用し、間違っています。

使用このコードは、あなたがこれを必要に応じて、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>

・ホープ内のすべての<a>リンクにクラスmy-classを割り当てます。

Answer 3

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

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

あなたはそれに応じて