JavaScriptのquerySelectorを使用して子要素を取得する方法

1. 単一の子要素を取得する場合: 親要素のquerySelectorメソッドを使用して、子要素を取得できます。例えば、以下のようなHTMLがあるとします。

   <div id="parent">
    <p>子要素1</p>
    <p>子要素2</p>
   </div>

   JavaScriptで子要素1を取得するには、次のようにします。

   const parent = document.querySelector('#parent');
   const child = parent.querySelector('p');
   console.log(child.textContent);

   出力結果は「子要素1」となります。

2. 複数の子要素を取得する場合: 親要素のquerySelectorAllメソッドを使用して、指定したセレクタに一致するすべての子要素を取得できます。例えば、以下のようなHTMLがあるとします。

   <ul id="parent">
    <li>子要素1</li>
    <li>子要素2</li>
    <li>子要素3</li>
   </ul>

   JavaScriptですべてのli要素を取得するには、次のようにします。

   const parent = document.querySelector('#parent');
   const children = parent.querySelectorAll('li');
   children.forEach(child => {
    console.log(child.textContent);
   });

   出力結果は「子要素1」、「子要素2」、「子要素3」となります。

以上の方法を使用することで、JavaScriptのquerySelectorを使って子要素を取得することができます。これにより、DOMの操作や要素の取得に便利な方法となります。