firstElementChildとは
- ここで説明するfirstElementChild とは次の語句からなるjavascriptのプロパティです。
- first
- 読み: ファースト
意味: 最初の、先頭の - element
- 読み: エレメント
意味: 要素 - child
- 読み: チャイルド
意味: 子、子供
firstElementChildプロパティの概要
このプロパティは、親要素に包含された最初の子要素をElementオブジェクトとして取得します。
このプロパティは読み取り専用です。
構文
サンプルを見る前に構文を確認しておきます。
var elmFirstChild = Element.firstElementChild;サンプルコードと実行結果
このサンプルでは親要素にdiv要素を置き、子要素に3つのspan要素を包含しています。
結果には親要素のプロパティ使って取得した先頭の子要素のid属性値を出力しています。 また先頭の子要素のinnerTextに"ファーストチャイルド"と出力しています。
サンプルコード: CSS
<style>
border: medium solid ##midnightblue;
background-color: ##lightblue;
line-height: 4em;
padding: 10px;
</style>
サンプルコード: HTML
<body>
<div id="idParent">
< span class ="clsChild" id="idChild1">子要素1< /span><br>
< span class ="clsChild" id="idChild2">子要素2< /span><br>
< span class ="clsChild" id="idChild3">子要素3< /span>
</div>
<p><output id="idOutput">innerText</output></p>
</body>
- 02: div (親要素です。この要素のfirstElementChildを使って先頭の子要素を取得しています。)
- 03: span (先頭の子要素です。id="idChild1"です。)
サンプルコード: script
<script>
let elmParent = document.getElementById("idParent");
let elmOutput = document.getElementById("idOutput");
let elmFChild = elmParent.firstElementChild;
elmOutput.innerText = elmFChild.id;
elmFChild.innerText = "ファーストチャイルド";
</script>
- 04: 子要素の取得 (elmFChildという変数に先頭の子要素オブジェクトを取得し、代入します。)
- 05: idの出力 (output要素に先頭の子要素のid値を出力します。)
- 06: テキストの出力 (先頭の子要素のコンテンツに"ファーストチャイルド"を出力します。)
サンプル要素:
子要素1
子要素2
子要素3
子要素2
子要素3
結果: