JavaScript プログラミング講座

 

テキストノードについて

 


■テキストノードについて

 
テキストノードは、「HTML 文書」や「XML 文書」の、タグ以外の文字データに相当します。
 
テキストノードは、ブラウザ画面上に配置して表示できる、DOM オブジェクトの1つです。(HTML 文書の場合)
 
タグ以外の文字部分がテキストノードとなる(改行やタブなどもテキストノードとして扱われる)

アイウ
<span>あいうえお</span>
カキク
<div>
	かきくけこ
	<span>さしすせそ</span>たちつてと
</div>
サシス
 
■テキストノードの注意点
 
空白、タブ、改行などのインデント整形用の文字であっても、すべてテキストノードとなります。
 
テキストノードは、子を持つ事はできません
 
■Text インターフェースについて
 
「タグ以外の文字データ」は、DOM では Text インターフェースとなります。
 
このページでは主に、Text インターフェースで供給される機能について解説しています。
 
■ Text インターフェースの派生について

Text インターフェースは、以下の様に派生しています。
 
ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。
 
Object
↓派生
EventTarget
↓派生
Node
↓派生
CharacterData
↓派生
Text
 


 

テキストノードを作成する

 


■テキストノードを作成する

 
テキストノードを作成するには、document.createTextNode() メソッドを使用します。
 
引数に、表示したい文字列を指定します。省略はできません。
 
後から、テキストノードの値を変更することも可能です。
 
document.createTextNode( "文字列" ) :Text
第01引数 Stringテキストノードの値を指定。
戻り値 Text新しいテキストノードが得られる。
 
テキストノードを作成する

// テキストノードを作成する
var text_node = document.createTextNode("表示テスト");
 

■テキストノードをブラウザ画面上に表示する

 
テキストノードを、ブラウザ画面上に表示するには、任意のノードリストに登録します。
 
ノードリストの登録は、こちらで解説しています。
 
テキストノードを作成する

// テキストノードを作成する
var text_node = document.createTextNode("表示テスト");

// BODY のノードリストに登録する
document.body.appendChild(text_node);
 

■エレメントに「文字列」をセットして、テキストノードを構築する

 
エレメントに「文字列」をセットして、テキストノードを構築する事もできます。
 
詳しくは、こちらで解説しています。
 
エレメントに文字列をセットして、テキストノードを構築する

// ------------------------------------------------------------
// エレメントに文字列をセットして、テキストノードを構築する関数
// ------------------------------------------------------------
function ElementSetTextContent(element,str){
	if(element.textContent !== undefined){
		element.textContent = str;
	}
	if(element.innerText !== undefined){
		element.innerText = str;
	}
}


// ------------------------------------------------------------
// エレメントを作成して配置する
// ------------------------------------------------------------
// 「DIV エレメント」を作成する
var element = document.createElement("div");

// エレメントに文字列をセットする
ElementSetTextContent(element,"あいうえお");

// BODY のノードリストに登録する
document.body.appendChild(element);
 


 

テキストノードの値を設定する

 


■テキストノードの値を設定する

 
テキストノードの値を変更するには、nodeValue プロパティを使用します。
 
nodeValue プロパティに文字列を渡すと、文章を変更することができます。
 
テキストノードの値を変更する

// テキストノードを作成する
var text_node = document.createTextNode("");

// テキストノードに文字列をセットする
text_node.nodeValue = "表示テスト";

// BODY のノードリストに登録する
document.body.appendChild(text_node);
 


 

テキストノードを2つに分割する

 


■テキストノードを2つに分割する

 
テキストノードを2つに分割するには、splitText()メソッドを使用します。
 
引数に、分割位置を指定します。
 
元のテキストノードの値は、「0 番目」から「指定した位置の 1 つ前」までとなります。
 
新しく生成されるテキストノードの値は、「指定した位置」から「最後」までとなります。
 
Text.splitText( 分割位置 ) :Text
第01引数 Number文字列を分割する位置
戻り値 Text新しいテキストノードが得られる。
 
テキストノードを分割して、新しいテキストノードを生成する

// テキストノードを作成する
var text_prev = document.createTextNode("あいうえおかきくけこ");

// テキストノードを分割して、新しいテキストノードを生成する
var text_next = text_prev.splitText(5);

// 出力テスト
console.log(text_prev); // あいうえお
console.log(text_next); // かきくけこ
 


 

連続するテキストノードを1つに統合する

 


■連続するテキストノードを1つに統合する

 
連続するテキストノードを1つに統合するには、normalize() メソッドを使用します。
 
連続するテキストノードを子として保有している、「親ノード」から呼び出します。
 
どのように統合されるかは、ブラウザによって動作が異なります。
 
テキストノードの値を変更する

// エレメントを作成する
var element = document.createElement("div");

// テキストノードを作成する
var text_node0 = document.createTextNode("あいう");
var text_node1 = document.createTextNode("かきく");
var text_node2 = document.createTextNode("さしす");

// エレメントのノードリストに、テキストノードを登録する
element.appendChild(text_node0);
element.appendChild(text_node1);
element.appendChild(text_node2);

// 連続するテキストノードを1つに統合する
element.normalize();

// 出力テスト
console.log(element.childNodes.length); // 1