テキストノード・とは？初心者にもわかる基本解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

テキストノード・とは？

テキストノードとは、HTMLやXMLの文書を構成する「文字列だけをもつノード」のことです。要素ノードがタグを表すのに対して、テキストノードは文字列そのものを格納します。ウェブページの中には見えない文字列がたくさんあり、それらはテキストノードとして扱われます。

この考え方を知ると、DOM（文書オブジェクトモデル）を使ってページを操作するときに役立ちます。テキストノードは直接表示される要素ではないことが多く、適切に扱うことで動的な変更やデータの抽出がスムーズになります。

テキストノードと他のノードの違い

要素ノードは実際のタグ（例：<p>、<div>）を表します。テキストノードはその中の文字列を表します。コメントノードは HTML に書かれたコメントそのものを表します。これらはそれぞれ役割が異なり、nodeType の値にも違いが現れます。

DOMでの基本的な扱い方

ある要素の中には、テキストノードと空白のテキストノードが混在していることがあります。childNodes 配列にはすべての子ノードが入りますが、テキストノードは <span>nodeType が 3 です。

代表的な操作には、textContent や nodeValue、data などを使い、テキストを取得したり変更したりします。これらは要素ノードだけでなく、テキストノードそのものにも適用できます。

実例で理解する

HTML の例として <p>こんにちは。</p> という段落には、1つのテキストノード「こんにちは」が含まれます。JavaScript で参照するときは、以下のようにします。

const p = document.querySelector('p');

const textNode = p.firstChild; // テキストノードを取得

console.log(textNode.nodeType); // 3 が表示される

console.log(textNode.nodeValue); // こんにちはが表示される

textNode.nodeValue を変更すると、ページ上の表示も変わります。例えば textNode.nodeValue = 'こんばんは'; と書くと、表示がこんばんはに変わります。

空白と実際の文字列の違いに注意

ソースコードを整えるための改行や空白スペースもテキストノードとして扱われることがあります。不要な空白は削除するか、改行を除く処理を行うのが実務ではよく使われるテクニックです。

実務での活用例

ウェブページを動的に更新するとき、リストを組み立てる際にテキストノードを挿入します。例えば、データを読み込んでリストを作る場合、各アイテムの文字列をテキストノードとして追加することで、表示の安定性を保てます。

まとめと注意点

テキストノードは文字列を保持するノードであり、DOM 操作の基本パーツです。要素ノードと混同しないように、nodeType（3）、textContent、nodeValue、data などの基本を押さえておくことが大切です。実際のコードでは、空白のテキストノードが混ざることもあるので、不要な場合は削除する工夫をしましょう。

よくある質問

Q: テキストノードだけを操作して、見た目を変えたいときはどうする？
A: textContent を使ってテキストを変更するか、場合によっては新しいテキストノードを作成して挿入します。

Q: テキストノードと要素ノードの違いは？
A: テキストノードは文字列を、要素ノードはタグ自体を表します。DOM の中で混在して存在することが多いので、nodeType の値で見分けます。

テキストノードの同意語

テキストノード: DOMツリー内で、テキスト（文字列）を保持するノード。要素の子として存在し、表示される文字情報を含みます。
文字ノード: テキストノードの別称。文字を格納するノードで、DOMツリーのテキスト部分を指します。
文字データノード: 文字データを格納するノードのこと。テキストノードと同義で使われる表現です。
テキストデータノード: 文字列データを保持するノード。テキストノードの別名として用いられることがあります。
文字列ノード: 文字列を格納するノードの呼び方。実質的にはテキストノードのことを指します。
Textノード: 英語表記の Text node の日本語表現。テキストを含むノードを指します。

テキストノードの対義語・反対語

要素ノード: テキストノードの対義語として、要素を表すノード。要素ノードはタグを表し、子ノードや属性を持つことで文書の構造を表現します。
コメントノード: コメントを格納するノード。表示には現れず、文書内の補足情報として使われます。
CDATA_SECTION_NODE: CDATA セクションを表すノード。中身のテキストをそのまま扱い、解析時のエスケープを回避します（通常のテキストとは別種のノードです）。
属性ノード: 要素の属性を表すノード。属性値も文字データを含みますが、直接の子テキストとしてのテキストノードとは異なります。
DOCUMENT_FRAGMENT_NODE: 複数のノードをひとまとめに扱う仮想的な容器ノード。文書内の直接のテキストではなく、ノードの集合を表します。
DOCUMENT_NODE: 文書全体を表すノード。DOM のルートであり、テキストノードはこの文書内の子ノードの一つとなります。

テキストノードの共起語

DOM: Document Object Modelの略。HTMLやXMLを木構造として表し、プログラムで操作できる仕様。
Document Object Model: 正式名称。文書のノードとプロパティを階層的に扱うAPI。
ノード: DOMの基本要素。要素ノード・テキストノードなどの総称。
Text: テキストノードを指す型。文字データを格納するノード。
テキスト: テキストノードが保持する文字列データのこと。
文字列: テキストノードが保持する文字の列（Unicode文字）。
文字データ: Textノードが保持する実データ。
nodeValue: ノードの値を表すプロパティ。テキストノードならその中身の文字列。
data: Textノードが保持する実データ（文字列）。
textContent: ノード内のテキストを取得・設定するプロパティ。子孫のテキストも含めて扱えることがある。
substringData: Textデータの一部を取り出すメソッド。
splitText: Textノードを分割して2つのTextノードに分けるメソッド。
createTextNode: 新しいTextノードを作成するDOMメソッド。
nodeType: ノードの種類を示す定数。Textノードは3。
nodeName: ノードの名称。Textノードは#text。
ownerDocument: このノードを所有するDocumentを示すプロパティ。
parentNode: このノードの親ノードを指すプロパティ。
nextSibling: 同じ親の次のノードを指すプロパティ。
previousSibling: 同じ親の前のノードを指すプロパティ。
childNodes: このノードの子ノードの集合。
length: Textデータの長さ（文字数）を表すプロパティ。
isElementContentWhitespace: 要素内のテキストが空白のみかを判定するメソッド（空白のみの場合は真になることがある）。
CDATASection: XMLのCDATセクションを表すノード。テキストデータを特別扱いするノード。
HTML: HTML文書内でのテキストノードの役割。
XML: XML文書内のテキストデータを扱う場面で登場する用語。
baseURI: ノードの基準となるURIを表すプロパティ。
appendData: Textノードの末尾に文字を追加するメソッド。
insertData: Textノードの指定位置に文字を挿入するメソッド。
deleteData: Textノードの指定位置の文字を削除するメソッド。
replaceData: Textノードの指定位置の文字を新しい文字列に置換するメソッド。

テキストノードの関連用語

テキストノード: テキストを格納するノード。DOMの木構造では、要素ノードの子として現れ、表示されるテキストの実体です。
ノード: DOMツリーの基本的な要素。すべてのノードは親子関係で木状につながっており、種類ごとに役割があります。
要素ノード: HTMLやXMLの要素（タグ）を表すノード。子としてテキストノードや他の要素ノードを持つことができます。
コメントノード: を表すノード。コード内の説明やメモを残すために使われます。
CDATAセクション: XMLで使われる、マークアップとして解釈されないテキストを囲む部分。DOMでは CDATA_SECTION_NODE として扱われます。
属性ノード: 要素の属性を表すノード。属性は element.attributes によって管理され、直接的には子ノードとしては扱われません。
ノードタイプ定数: Node.ELEMENT_NODE（1）、Node.TEXT_NODE（3）など、ノードの種類を識別する定数です。
textContent: ノードとその子孫の全テキストを取得・設定するプロパティ。テキストだけを一括で扱う際に使います。
nodeValue: 現在のノードの値を取得・設定するプロパティ。テキストノードでは中身の文字列を指します。
innerText: 要素の表示されるテキストを取得する、標準仕様外のプロパティ。ブラウザによって挙動が異なることがあるので注意します。
空白テキストノード: 改行や空白だけからなるテキストノード。HTMLの整形時に現れることがあり、表示には影響しない場合があります。
TreeWalker / NodeIterator: DOMツリーを順序立てて走査するためのAPI。特定のノードだけを抽出して処理するのに便利です。
document.createTextNode: 新しいテキストノードを作成するDOMメソッド。テキストの挿入や分割時に使います。
appendChild / removeChild / replaceChild: ノードを追加・削除・置換する基本操作。テキストノードの編集にも頻繁に使われます。
テキストノードの分割と結合: 長いテキストを複数のテキストノードに分割したり、別々のテキストノードを一つに結合したりする操作。エディタ処理で重要です。