今回は、.querySelectorAll() を使って子要素を取得する方法についてです。
普段は .getElementById() を使えば事足りることが多いのですが、今回はちょっと複雑な処理だったので、.querySelectorAll() を使いました。
あまり使ったことがなかったのですが…便利ですね！
実装にあたり、参考にさせていただいた記事はこちらから。
JavaScript | querySelectorAll()で子要素を取得するパターン集 | ONE NOTES
https://1-notes.com/javascript-get-child-elements/
サンプルコードはこちら。
まず、要素の ID が parent の要素の子要素の内、<p> 要素だけを取得します。
let p_elements = document.querySelectorAll('#parent p');
なお、返り値は配列なので、p_element[0] のようにして、子要素を取得します。
次はこちら。
こちらのコードでは、要素の ID が parent の要素の最初の子要素を取得します。
let first_elements = document.querySelectorAll('#parent :first-child');
なお、こちらも返り値は配列です。
最後に、こちらです。
こちらのコードでは、要素の ID が parent の要素の、子要素が <div> で、さらにその子要素（parent の要素から見て孫要素）が、<p> のものだけを取得します。
let p_elements = document.querySelectorAll('#parent div p');
使い道はあまりないかもしれませんが、今回はとても役に立ちました…！
他にも、<div> タグ以外の要素を取得したり、最後の子要素を取得することもできました。
機会があれば活用したいと思います！
以上、JavaScript の .querySelectorAll() を使って、特定の子要素を取得する方法についてでした。
ご参考になれば幸いです。
