取得した要素配下の子要素をリストに格納する方法

Question

取得した要素配下にある特定の子要素をリスト形式で取得したいのですが、うまく取得する方法が分からないかった為、質問させて貰いました。

 <ul id="dropdown-list">
          <li><a class="dropdown-item" href="#"></a></li>
          <li><a class="dropdown-item" href="#">item1</a></li>
          <li><a class="dropdown-item" href="#">item2</a></li>
          <li><a class="dropdown-item" href="#">item3</a></li>
          <li><a class="dropdown-item" href="#">item4</a></li>
          <li><a class="dropdown-item" href="#">item5</a></li>
          <li><a class="dropdown-item" href="#">item6</a></li>
          <li><a class="dropdown-item" href="#">item7</a></li>
          <li><a class="dropdown-item" href="#">item8</a></li>
          <li><a class="dropdown-item" href="#">item9</a></li>
        </ul>

const dropdown_list = document.getElementById('dropdown-list')
const dropdown_link_list = []
dropdown_list.forEach(element => {
  dropdown_link_list = element.child
});

こちらのコードにおきまして、li要素配下のa要素をリストに入れ格納したいと考えているのですが、良い方法はありますでしょうか。
どなたか、ご助言頂けましたら幸いです。

Comments

[yambejp]

「リスト形式」とはなんでしょう？

[ruuuu]

失礼しました。具体的にどうするか迷っていた為に、曖昧な書き方になってしまいました。
リスト型で実装できたらと考えています

[yambejp]

ノードリスト型という意味でしょうか？
配列ではない？
唐突にでてくるdropdown_link_list_leftやchildも
いまいち何をしたいかわかりません

[ruuuu]

ちょっとこちら、間違いで記述していた部分がありました為、修正しました。

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
  const nodes=[...document.querySelectorAll('#dropdown-list a')];
  console.log(nodes);
});

Comments

[ruuuu]

ご回答ありがとうございます。
階層を辿っていく形でなく、直接タグの指定で取得することが出来たという訳だったのですね...
てか自分全然わかっていなかったのですが、「document.querySelectorAll('#dropdown-list a')」この形でもリストみたいな形で取得することができるのですね

[ruuuu]

自分がちょっとわかってなさすぎて、「リスト形式」と曖昧な言い方してしまったのですが、リスト型に変換し取得する方法をご提示頂き、大変参考になりました。

[ruuuu]

ご親切にありがとうございます。
一旦、NodeList型で扱うかList型で扱うか、メリットデメリット含め、考えてみたいと思います

Answer 2

dropdown_list.querySelectorAll('a.dropdown-item') を配列化したりそのまま使ったりすればよいでしょう。

---

参考までに、<ul>はJavaScriptでは HTMLUListElement という型で、その型には forEach() というメソッドはありません。要素の子供を順に処理するには、for (let child of dropdown_list.children) { ... } のようにします。

Comments

[ruuuu]

ご回答ありがとうございます。
>dropdown_list.querySelectorAll('a.dropdown-item')
自分、階層を辿って取得していく必要があるかと思っていたのですが、タグやidの指定をすることで取得することが出来たのですね。参考になりました。

>参考までに、<ul>はJavaScriptでは HTMLUListElement という型で、その型には forEach() というメソッドはありません
こちらも知りませんでした...
大変、参考になりました。