2

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

<!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>

2 件の回答 2

6

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

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

1

が付けられているので別のアプローチとして、document.querySelector()を使用することで、document.getElementById()よりも効率よく検索をすることができます。

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

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。