以下のリンクをクリックすると、該当する解説部分にジャンプします。

• oElement.firstChild.nodeValue
• oElement.innerText
• oElement.innerHTML

oElement.firstChild.nodeValue

oElement.firstChild.nodeValueは、指定された要素の最初の子ノードがテキストノードである場合、その値を取得します。 主に純粋なテキストコンテンツを扱う場合に使用されます。

特徴

• 純粋なテキストノードを参照する。
• HTMLタグなどの構造は含まれない。
• 最初の子ノードがテキストノード以外の場合はnullを返す。

使用例

// HTML
<div id="example1">こんにちは</div>

// JavaScript
const element = document.getElementById("example1");
console.log(element.firstChild.nodeValue); // 結果: "こんにちは"

// テキストノードが存在しない場合
const element2 = document.createElement("div");
console.log(element2.firstChild); // 結果: null

注意点

• 要素内に空白や改行がある場合、それもテキストノードとしてカウントされることがあります。
• 子ノードが複数ある場合、最初の子ノードだけが対象になります。

oElement.innerText

oElement.innerTextは、要素内のテキストコンテンツを取得または設定するために使用されます。 このプロパティは、要素内の表示されるテキストだけを扱う点で、innerHTMLと異なります。

特徴

• 画面に表示されるテキストのみを取得する。
• CSSのdisplay: none;などで非表示にされたテキストは無視される。
• HTMLタグは含まれない。

使用例

// HTML
<div id="example2">こんにちは <span style="display: none;">世界</span></div>

// JavaScript
const element = document.getElementById("example2");
console.log(element.innerText); // 結果: "こんにちは"

注意点

• 要素のCSSによって取得結果が変わる場合があります。
• 複雑なHTML構造を持つ場合は、意図しない結果が得られることがあります。

oElement.innerHTML

oElement.innerHTMLは、要素内のHTMLコンテンツを文字列として取得または設定するプロパティです。 HTMLタグやその内容を含む完全な内容を取得できます。

特徴

• HTMLタグを含む全てのコンテンツを文字列として取得する。
• HTMLタグを含めたコンテンツを変更することも可能。
• スクリプトを挿入する場合はセキュリティリスクが伴う。

使用例

// HTML
<div id="example3">こんにちは <strong>世界</strong></div>

// JavaScript
const element = document.getElementById("example3");
console.log(element.innerHTML); // 結果: "こんにちは 世界"

// innerHTMLの書き換え
element.innerHTML = "新しい テキスト";
console.log(element.innerHTML); // 結果: "新しい テキスト"

注意点

• 悪意のあるスクリプトを挿入される可能性があるため、ユーザー入力には使用しないことを推奨します。
• DOM操作に対する影響が大きいため、慎重に使用する必要があります。

以上、firstChild.nodeValue、innerText、innerHTMLの違いや使い方について解説しました。用途に応じて適切に使い分けてください。