JavaScriptで特定の要素の「先頭の子要素を取得したい」という場合があったので、今後のために方法をメモ書きました。

サンプルを作りました

codepenでとてもシンプルなサンプルを作りました。Chromeのデベロッパーツール（F12キーを押す）などでコンソールを確認すると、div要素の先頭の子要素であるul要素が表示されます。

あえてul要素を取得してみましたが、ul要素のさらに子要素のli要素も取得できることがわかります。

HTML

<div id="wrap">
 <ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
 </ul>
 <p>text1</p>
</div>

JavaScript

まずは「getElementById」を使って親要素を取得して、その親要素に対して「firstElementChild」を使って、先頭の子要素を取得って感じです。

var parent = document.getElementById('wrap');
console.log( parent.firstElementChild );