firstChild で取得した子要素の innerHTML が undefined になっている


ボタンを押下後、エレメントの最初の子要素を取得し、その要素の内容(例：a)をダイアログで表示したいのですが、undefinedと表示されます。どう修正すればよろしいでしょうか。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>あいうえお商店</title>
    
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <body>
        <div id="childcatch">
          <span>a</span>
          <span>b</span>
          <span>c</span>
          <span>d</span>
          <span>e</span>
        </div>
        <script type="text/javascript">
          function findElement() {
            var element = document.getElementById("childcatch");
            var child = element.firstChild;
            alert(child.innerHTML);
          }
        </script>
        <button onclick="findElement()">最初の子を取得</button>
      </body>
      </html>
    
[/code]




結論から言えば、`firstChild`ではなく`firstElementChild`にすれば解決します。

`firstChild`はElementに限定せずノードを返します。`<div
id="childcatch">`と`<span>a</span>`の間に改行と空白があるため、そこにtext
nodeが作成され、`firstChild`となります。そしてtext
nodeは`innerHTML`プロパティを持たないので、`undefined`が返ってきたということです。

