Node: firstChild プロパティ

Node、または存在しなければ null。

次の例では firstChild の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。

<p id="para-01">
  <span>最初の span</span>
</p>

<script>
  const p01 = document.getElementById("para-01");
  console.log(p01.firstChild.nodeName);
</script>

上記の例ではコンソールに '#text' と表示されます。開始タグ <p> の末尾と <span> タグとの間にある空白を調整するためにテキストノードが挿入されているためです。あらゆるホワイトスペースは、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの #text ノードを生成します。

#text ノードはもう 1 つ、閉じタグ </span> と </p> の間に挿入されます。

ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。

<p id="para-01"><span>最初の span</span></p>

<script>
  const p01 = document.getElementById("para-01");
  console.log(p01.firstChild.nodeName);
</script>

コンソールには 'SPAN' と表示されるようになります。

node.firstChild が #text や #comment ノードを返す問題を回避するには、 Element.firstElementChild を使用すると最初の要素ノードのみを返すことができます。

• Element.firstElementChild
• Node.lastChild