DOM操作の最適解：createTextNode、innerHTML、textContentの徹底比較と使い分け
Webアプリケーションのパフォーマンスにおいて、DOM操作は最もコストのかかる処理の一つです。特に動的なコンテンツ生成が求められるモダンなフロントエンド開発において、どの手法を選択するかは単なるコーディングスタイルの違いではなく、アプリケーションの実行速度やセキュリティ、メンテナンス性に直面する重要なエンジニアリング上の決定です。本稿では、DOMノードを生成・更新するための主要な3つの手法である`createTextNode`、`innerHTML`、`textContent`について、その内部動作からパフォーマンス、セキュリティまでを深掘りします。
各手法の技術的特性と内部挙動
まず、それぞれのメソッドがDOMツリーに対してどのように作用するのかを理解する必要があります。
`innerHTML`は、指定された要素のHTMLコンテンツを文字列として取得、あるいは設定するプロパティです。ブラウザはこれに文字列を渡されると、その文字列をHTMLパーサーに渡し、DOMツリーを構築し直します。この過程では、文字列の解析（Parsing）と、既存のDOMノードの破棄・再生成が伴います。
`textContent`は、ノードとそのすべての子孫のテキスト内容を取得、あるいは設定するプロパティです。HTMLタグを解析することなく、純粋なテキストとしてノード内に挿入します。DOMツリーを構築し直すのではなく、ノードのテキスト値のみを更新するため、`innerHTML`に比べて極めて軽量です。
`createTextNode`は、DOM APIの標準的なメソッドであり、テキストノードを直接作成します。このメソッドで作成されたノードは、`appendChild`や`replaceChild`などのメソッドを使用して、明示的にDOMツリーに組み込む必要があります。HTMLの解析が一切発生しないため、最も低レベルで制御可能な手法と言えます。
パフォーマンスの決定的な違い
フロントエンド・エンジニアとして最も注目すべきは、大規模なリストのレンダリングや、頻繁なDOM更新が発生する場面でのパフォーマンスです。
`innerHTML`は、文字列を解析してDOMノードを生成するというオーバーヘッドがあるため、一度に大量の要素を挿入する場合には高速に感じられることがありますが、既存の要素を更新する際には注意が必要です。`innerHTML += ‘…’`のように記述すると、既存のDOMノードがすべて破棄され、再解析・再生成されるため、メモリリークやパフォーマンス低下の原因となります。
一方、`textContent`と`createTextNode`は、ブラウザが解析を行う必要がないため、CPUリソースの消費が圧倒的に少なくなります。特に、すでにDOMツリーが存在する中で一部のテキストだけを書き換える場合、`textContent`は`innerHTML`と比較して数倍から十数倍高速に動作することが一般的です。
`createTextNode`は、特定のテキストノードのみを動的に生成して挿入する場合に最適です。例えば、仮想DOMライブラリが内部的に行っているような「最小限のDOM操作」を手動で実装する場合、`createTextNode`は非常に強力な武器となります。
セキュリティ：クロスサイトスクリプティング（XSS）の観点
セキュリティは、手法を選択する際の最も優先すべき考慮事項です。
`innerHTML`は、その名前の通りHTMLを解釈します。もし、ユーザーが入力したデータをサニタイズせずに`innerHTML`に代入すると、悪意のあるスクリプト（``など）が実行されるリスクがあります。これを防ぐには、DOMPurifyのようなライブラリを用いた厳格なサニタイズが必須となります。
対照的に、`textContent`と`createTextNode`は、入力されたデータを「単なるテキスト」として扱います。たとえ文字列の中に`
コメント