HTML DOMfirstChildプロパティ
例
<ul>要素の最初の子ノードのHTMLコンテンツを取得します。
var x = document.getElementById("myList").firstChild.innerHTML;
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
firstChildプロパティは、指定されたノードの最初の子ノードをNodeオブジェクトとして返します。
このプロパティと firstElementChildの違いは、firstChildが最初の子ノードを要素ノード、テキストノード、またはコメントノード(どちらが最初かによって異なります)として返すのに対し、firstElementChildは最初の子ノードを要素ノードとして返す(テキストを無視する)ことです。およびコメントノード)。
注:要素内の空白はテキストと見なされ、テキストはノードと見なされます(「その他の例」を参照)。
このプロパティは読み取り専用です。
ヒント:要素.childNodesプロパティを使用して 、指定したノードの子ノードを返します。childNodes [0]は、firstChildと同じ結果を生成します。
ヒント:指定したノードの最後の子ノードを返すには、lastChildプロパティを使用します。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
firstChild | Yes | Yes | Yes | Yes | Yes |
構文
node.firstChild
技術的な詳細
戻り値: | ノードの最初の子を表すNodeオブジェクト、または子ノードがない場合はnull |
---|---|
DOMバージョン | コアレベル1ノードオブジェクト |
その他の例
例
この例では、空白がこのプロパティにどのように干渉するかを示します。
<div>要素の最初の子ノードのノード名を取得します。
<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
例
ただし、ソースから空白を削除すると、<div>に#textノードがなくなり、<p>要素が最初の子ノードになります。
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
例
<select>要素の最初の子ノードのテキストを取得します。
var x = document.getElementById("mySelect").firstChild.text;
関連ページ
HTML DOMリファレンス:ノード。lastChildプロパティ
HTML DOMリファレンス:ノード。childNodesプロパティ
HTML DOMリファレンス:ノード。parentNodeプロパティ
HTML DOMリファレンス:ノード。nextSiblingプロパティ
HTML DOMリファレンス:ノード。previousSiblingプロパティ
HTML DOMリファレンス:ノード。nodeNameプロパティ