Javascriptで階層下の要素を取得したい

<ul>タグの内の<li>タグ内の<a>タグにアクセスして、classを付与したいのですが、<a>タグの取得がうまくいきません。どこが間違っているのか指摘いただきたいです。 ``` <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="collapse navbar-collapse"> <ul id="nav"> <li class="nav-item"><a class="nav-link" href="./menu1.html">メニュー1</a></li> <li class="nav-item"><a class="nav-link" href="./menu2.html">メニュー2</a></li> <li class="nav-item"><a class="nav-link" href="./menu3.html">メニュー3</a></li> </ul> </div> <script> function setActive() { const nav = document.getElementById('nav') const navLi = nav.getElementsByTagName('li') const selector = navLi.getElementsByTagName('a') for (i = 0; i < selector.length; i++) { if (document.location.href.indexOf(selector[i].href) > 0) { selector[i].className = 'active'; } } }; window.onload = setActive; </script> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

navLi はHTMLCollectionなのでgetElementsByTagName()を
実装していません。ループでまわすか以下
~~document.querySelectorAll('nav li a')~~
document.querySelectorAll('#nav li a')

投稿2020/02/12 06:16

編集2020/02/12 06:35

yambejp

総合スコア116724

KoTT

2020/02/12 06:26

ありがとうございます。 getElementById('nav')は配列的な要素を取得しているため、これに被せる形で、getElementsByTagName()やgetElementsByClassName()は使えない・・・ということでしょうか、、、

x_x

2020/02/12 06:29

nav は id なので '#nav li a' かと。

yambejp

2020/02/12 06:31

あ、ほんとですね先入観でnavタグだと思ってしまいました

yambejp

2020/02/12 06:34

> getElementById('nav')は配列的な要素を取得しているため違います。 getElementById('nav')でえたnavはHTMLElementなので getElementsByTagName()が利用できます。 navLi が配列的なデータ群なのです＞これに被せる形でやるなら、ループでHTMLElementを掴んでください

KoTT

2020/02/12 08:34

ありがとうございます。ループで掴むとは、こういうことでしょうか。 ``` const nav = document.getElementById('nav'); const navLi = nav.getElementsByTagName('li'); const selector = []; for (let i = 0; i < navLi.length; ++i) { selector[i] = navLi[i].getElementsByTagName('a'); }; ```

yambejp

2020/02/12 08:45 編集

どうしてもこだわりたいならこう const nav = document.getElementById('nav'); const navLi = nav.getElementsByTagName('li'); const selector =[...navLi].map(x=>[...x.getElementsByTagName('a')]).flat(); でも、これをやるなら const selector=document.querySelectorAll('#nav li a'); で済んじゃうので、なんのためこだわっているかさっぱりわかりません

KoTT

2020/02/12 08:44

すいません。querySelectorであっさりできてしまったので、合わせてループの方法も理解しておきたいと思った次第です。

yambejp

2020/02/12 08:52

ああ、querySelectorAllからループする方法の方ですね・・・ window.addEventListener('DOMContentLoaded', ()=>{ document.querySelectorAll('#nav li a').forEach(x=>{ x.classList.toggle('active',location.href.indexOf(x.href) >= 0); }); });

行動規範の内容に同意します