

ボタンを押下後、エレメントの最初の子要素を取得し、その要素の内容(例：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]


CC BY-SA 3.0
2017-07-17T13:47:49.123
36454
2017-07-17T23:00:44.443
2017-07-17T23:00:44.443
3054
17348
question
javascript html5 dom
firstChild で取得した子要素の innerHTML が undefined になっている


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

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


CC BY-SA 3.0
2017-07-17T14:06:24.760
36455
2017-07-17T14:06:24.760
20206
36454
answer


[html5](/questions/tagged/html5 "'html5'
のタグが付いた質問を表示")が付けられているので別のアプローチとして、[`document.querySelector()`](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)を使用することで、`document.getElementById()`よりも効率よく検索をすることができます。

> エレメントの最初の子要素を取得

をCSSセレクターで表現すると`#childcatch > *:first-child`とできますので

[code]

    function findElement() {
        var child = document.querySelector("#childcatch > *:first-child");
        alert(child.innerHTML);
    }
    
[/code]

と書けます。（DOMはNodeを対象とするため`firstChild`では意図しない結果となりますが、CSS
Selectorは主にElementを対象とするため`:first-child`で問題ありません。）


CC BY-SA 3.0
2017-07-17T14:31:54.330
36456
2017-07-17T14:31:54.330
4236
36454
answer