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

HTML DOMのfirstChildプロパティとは？使い方と注意点を解説

HTML DOMのfirstChildプロパティは、特定のノードの最初の子ノードをノードオブジェクトとして返すために使用されます。返される内容は、最初の子ノードの種類に応じて、テキストノード・要素ノード・コメントノードのいずれかになります。なお、このプロパティは読み取り専用です。

構文

HTML DOM firstChildプロパティの基本構文は以下のとおりです。

node.firstChild

サンプルコード

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

<!DOCTYPE html>
<html>
<head>
<script>
   function getFirst() {
      var ch = document.getElementById("DIV1").firstChild.innerHTML;
      document.getElementById("Sample").innerHTML = "The first child node of the div is :"+ch;
   }
</script>
</head>
<body>
<h1>firstChild property</h1>
<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>
<button onclick="getFirst()">Get Child</button>
<p id="Sample"></p>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

HTML DOMのfirstChildプロパティとは？使い方と注意点を解説

「Get Child」ボタンをクリックすると、次のようになります。

HTML DOMのfirstChildプロパティとは？使い方と注意点を解説

コードの解説

まず、<div>要素の中に<p>要素と<span>要素を配置しています。ここで重要なのは、div要素内に空白や改行を含めないことです。firstChildプロパティは空白文字もテキストノードとして扱うため、div要素内に空白があると、その空白部分が「最初の子ノード」と見なされてしまい、期待した要素ではなくundefinedが返される原因となります。

<div id="DIV1"><p>This is a p element</p><span>This is a span element</span></div>

次に、ユーザーがクリックするとgetFirst()メソッドを実行する「Get Child」ボタンを作成しています。

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

getFirst()メソッドでは、firstChildプロパティを使ってdiv要素の最初の子ノードを取得します。この例では<p>要素が返されます。続いて、innerHTMLプロパティでp要素内のテキストを取得し、変数chに代入します。最後に、idが「Sample」の段落に対してinnerHTMLプロパティ経由でテキストを設定することで、取得した内容を画面に表示しています。

function getFirst() {
   var ch = document.getElementById("DIV1").firstChild.innerHTML;
   document.getElementById("Sample").innerHTML = "The first child node of the div is :"+ch;
}

まとめ

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プロパティには、以下のような値を指定できます。 値説明