HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのfirstElementChildプロパティとは？使い方とコード例を解説

HTML DOMのfirstElementChildプロパティは、指定した要素の最初の子要素（エレメントノード）を取得するために使用されます。このプロパティが返すのは要素ノードのみであり、テキストノードやコメントノードは無視されます。また、読み取り専用のプロパティであるため、値を設定することはできません。

なお、子要素が存在しない場合は null が返される点にも注意してください。

構文

HTML DOM firstElementChildプロパティの構文は以下の通りです。

element.firstElementChild

コード例

firstElementChildプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>firstElementChildプロパティ</title>
<script>
    function eleChild() {
        var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
        document.getElementById("Sample").innerHTML = "divの最初の子要素ノード : " + ch;
    }
</script>
</head>
<body>
<h1>firstElementChildプロパティ</h1>
<div id="DIV1">
<p>これはp要素です</p>
<span>これはspan要素です</span>
</div>
<button onclick="eleChild()">Get Child</button>
<p id="Sample"></p>
</body>
</html>

実行結果

このコードを実行すると、以下のように表示されます。

HTML DOMのfirstElementChildプロパティとは？使い方とコード例を解説

「Get Child」ボタンをクリックすると、次のように最初の子要素の内容が表示されます。

HTML DOMのfirstElementChildプロパティとは？使い方とコード例を解説

コードの解説

上記の例では、以下のような処理を行っています。

まず、ユーザーがクリックすると eleChild() 関数が実行される「Get Child」ボタンを作成しています。

<button onclick="eleChild()">Get Child</button>

eleChild() 関数では、idが「DIV1」のdiv要素に対して firstElementChild を取得し、その innerHTML プロパティの値を変数 ch に代入しています。firstElementChild は空白やテキストを要素として扱わないため、ここでは最初の子要素である <p> 要素が返されます。そして、innerHTML プロパティによって <p> 要素内のテキストを取得し、idが「Sample」の段落に表示しています。

function eleChild() {
    var ch = document.getElementById("DIV1").firstElementChild.innerHTML;
    document.getElementById("Sample").innerHTML = "divの最初の子要素ノード : " + ch;
}

firstChildプロパティとの違い

似たようなプロパティに firstChild がありますが、両者には重要な違いがあります。firstChild は最初の子ノードをそのまま返すため、HTMLソース内の改行やインデントによって生成されたテキストノードが返されることがあります。一方、firstElementChild は要素ノードのみを対象とするため、意図した通りの要素を確実に取得できます。

対応ブラウザ

firstElementChildプロパティは、Chrome、Firefox、Safari、Edge、Operaなど、主要なモダンブラウザすべてでサポートされています。Internet Explorer 9以降でも利用可能です。

まとめ

firstElementChildプロパティを使うことで、テキストノードやコメントノードを気にすることなく、簡単に最初の子要素を取得できます。DOM操作で子要素を扱う際は、firstChildではなくfirstElementChildを使用することで、より安全で読みやすいコードを書くことができます。

  1. HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説

    HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ

  2. HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

    HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明