導入：なぜCharacterDataを知るべきなのか
Web開発をしていると、「特定の要素の中にあるテキストだけを書き換えたい」「長い文章の一部だけを抜き出したい」といった場面に遭遇します。多くの初心者は innerText や innerHTML を使いがちですが、これらを使うと要素内のすべてのHTML構造が再描画されてしまい、パフォーマンス低下や予期せぬ不具合の原因になることがあります。
CharacterData API を活用すると、DOM内のテキストノードをピンポイントで効率よく操作できるようになります。無駄な再レンダリングを避け、より高速で安全なDOM操作を実現するために、ぜひ習得しておきましょう。
基礎知識：CharacterDataとは何か？
WebブラウザのDOMツリーにおいて、テキストは「Textノード」として存在しています。CharacterDataは、この「テキストそのもの」を扱うためのインターフェースです。
具体的には、以下のノードがCharacterDataを継承しています。
・Textノード（要素内のテキスト）
・Commentノード（HTML内のコメント）
つまり、CharacterDataのメソッドを覚えると、テキストの追加、削除、置換、抽出が非常にシンプルに書けるようになります。
実装：CharacterDataの主要メソッド
CharacterDataには、テキストを操作するための強力なメソッドが用意されています。
・data: 現在のテキスト内容を取得・設定するプロパティ
・appendData(string): 末尾に文字列を追加
・deleteData(offset, count): 指定位置から指定文字数だけ削除
・insertData(offset, string): 指定位置に文字列を挿入
・replaceData(offset, count, string): 指定範囲を新しい文字列に置換
・substringData(offset, count): 指定範囲の文字列を抽出
サンプルプログラム：テキストを動的に操作する
以下のコードをHTMLファイルに貼り付けてブラウザで実行してみてください。ボタンを押すたびに、特定のテキストノードが安全に書き換わります。
こんにちは、世界！
応用・注意点：現場での活用と落とし穴
注意点1：要素の中に別のHTMLタグがある場合
もし p タグの中に span タグなどが混ざっていると、firstChild は span 要素を指してしまうため、CharacterDataのメソッドは使えません。その場合は、目的のテキストノードを nodeType 属性を使って厳密に指定する必要があります。
注意点2：パフォーマンスの最適化
innerText で書き換えると、ブラウザはその要素内のすべてのレイアウトを再計算します。一方、CharacterDataでテキストノードのみを直接更新すれば、ブラウザの再描画コストを最小限に抑えられます。チャットアプリやリアルタイムで文字数が増減するUIを作る際には、この手法が非常に有効です。
まずはシンプルなテキストノードで CharacterData を操作することに慣れてみてください。DOM操作の引き出しが一段と増えるはずです。