JavaScript で要素の最初の子を抽出する

1. Node.firstChild を使用して JavaScript で要素の最初の子を抽出する
2. Node.childNodes を使用して JavaScript で要素の最初の子を抽出する
3. Element.children を使用して JavaScript で要素の最初の子を抽出する

今日の投稿では、JavaScript で要素の最初の子を抽出する方法を学びます。

Node.firstChild を使用して JavaScript で要素の最初の子を抽出する

Node.firstChild は、ツリー内のノードの最初の子を返します。ノードに子がない場合は null を返します。 これは Node インターフェイスの読み取り専用の firstChild プロパティです。

構文：

Node.firstChild

たとえば、Hello World! を示す段落タグがあります。 その中のテキストを別の span タグに入れます。

HTML コード:

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript コード:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.firstChild);

出力：

"#text"

上記のコードを任意のブラウザーで実行すると、ブラウザーのコンソールに #text が表示されます。 これは、段落終了タグとスパン開始タグの間に空白を保持するために、デフォルトでテキスト ノードが挿入されるためです。

各空白は、単一のスペースから複数のスペース、改行、タブなどまで、#text ノードを自動的に作成します。

テキスト ノードの問題を回避するには、ソースから空白を削除するか、Element.firstElementChild を使用して最初の要素ノードのみを返すことができます。

firstChild の詳細については、こちら のドキュメントを参照してください。

Node.childNodes を使用して JavaScript で要素の最初の子を抽出する

Node.childNodes は、指定された要素の子ノードのアクティブな NodeList を返します。インデックス 0 は最初の子ノードに割り当てられます。 これは、Node インターフェイスの読み取り専用のchildNodesプロパティです。

子ノードには、アイテム、テキスト、およびコメントが含まれます。

ノード コレクションの要素は、文字列ではなくオブジェクトです。 ノード オブジェクトからデータを取得するには、それらのプロパティを使用します。

たとえば、最初の子ノードの名前を取得するには、elementNodeReference.childNodes[0].nodeName を使用できます。

ChildNodes には、デフォルトで、要素と非要素の両方のすべての子ノードが含まれます。 ノードの子を含むアクティブな NodeList を返します。

childNodes の詳細については、こちら のドキュメントを参照してください。

たとえば、Hello World! を示す段落タグがあります。 その中のテキストを別の span タグに入れます。

HTML コード:

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript コード:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.childNodes[0]);

出力：

"#text"

前のセクションと同様に、デフォルトでは、テキスト ノードが挿入され、段落タグの末尾とスパン タグの開始の間に空白が保持されます。

Element.children を使用して JavaScript で要素の最初の子を抽出する

Element.children プロパティは、呼び出された要素のすべての子を含むライブ HTML コレクションを返します。

Element.children と Node.childNodes の唯一の違いは、Element.children には要素ノードのみが含まれるのに対し、Node.childNodes はテキストやコメントなどの非要素ノードを含むすべての子ノードを取得することです。

HTML コレクションは、ノードの DOM 要素の子のアクティブで順序付けられたコレクションです。 item() メソッドを使用して、コレクションの各子ノードにアクセスできます。

子の詳細については、こちら のドキュメントを参照してください。

たとえば、Hello World! を示す段落タグがあります。 その中のテキストを別の span タグに入れます。

HTML コード:

<p id="firstPara">
    <span>Hello World!</span>
</p>

JavaScript コード:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.children[0]);

出力：

"Hello World!"

上記のコードを任意のブラウザーで実行すると、ブラウザーのコンソールに "Hello World!" が表示されます。 これは、このプロパティが呼び出しノードの DOM 要素のみを返すためです。