テキストノードについて（Text）
テキストノードについて
■テキストノードについて
テキストノードは、「HTML 文書」や「XML 文書」の、タグ以外の文字データに相当します。
テキストノードは、ブラウザ画面上に配置して表示できる、DOM オブジェクトの１つです。（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);
■エレメントに「文字列」をセットして、テキストノードを構築する
エレメントに「文字列」をセットして、テキストノードを構築する事もできます。
詳しくは、こちらで解説しています。
エレメントに文字列をセットして、テキストノードを構築する
// 「DIV エレメント」を作成する
var element = document.createElement("div");
// エレメントに文字列をセットする
element.textContent = "あいうえお";
// BODY のノードリストに登録する
document.body.appendChild(element);
テキストノードの値を設定する
■テキストノードの値を設定する
テキストノードの値を変更するには、nodeValue プロパティを使用します。
nodeValue プロパティに文字列を渡すと、文章を変更することができます。
テキストノードの値を変更する
// テキストノードを作成する
var text_node = document.createTextNode("");
// テキストノードに文字列をセットする
text_node.nodeValue = "表示テスト";
// BODY のノードリストに登録する
document.body.appendChild(text_node);
テキストノードを２つに分割する
■テキストノードを２つに分割する
テキストノードを２つに分割するには、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); // かきくけこ
連続するテキストノードを１つに統合する
■連続するテキストノードを１つに統合する
連続するテキストノードを１つに統合するには、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);
// 連続するテキストノードを１つに統合する
element.normalize();
// 出力テスト
console.log(element.childNodes.length); // 1