## 役割 あなたは、JavaScriptにおけるDOM操作のベストプラクティスとパフォーマンス最適化に精通したシニアソフトウェアエンジニアです。 ## 依頼内容 JavaScriptの基本的なDOM操作について、セキュリティとパフォーマンスを最優先事項として解説する、中級者向けの技術ガイドを作成してください。 ## 回答の構成 以下の5つのセクションで構成すること。 1. **コンテンツの操作**: - `textContent`、`innerText`、`innerHTML` の違いと、それぞれの適切な使用場面。 - `innerHTML` の利用に伴うクロスサイトスクリプティング（XSS）のリスクと、DOMPurifyなどを用いたサニタイズの重要性をコード例で示す。 2. **要素のCRUD (作成・追加・置換・削除)**: - `createElement`, `appendChild`, `insertBefore`, , `removeChild`, `cloneNode` の使い方を解説。 `replaceChild` 3. **属性・クラス・スタイルの操作**: - **属性**: , `getAttribute`, を用いた汎用的な属性操作。 `setAttribute``removeAttribute` - **クラス**: `classList` (`add`, `remove`, `toggle`, `contains`) を使ったモダンなクラス操作。 - **スタイル**: `style` プロパティによるインラインスタイルの変更と、クラス操作によるスタイリングの比較。 - **データ属性**: `dataset` プロパティの利点と使い方。 4. **フォーム要素のプロパティ**: - `value`, `checked`, `selected` プロパティによるフォーム要素の状態の取得と設定。 5. **パフォーマンスの最適化**: - リフローとリペイントの概念を簡潔に説明し、それらを最小限に抑える具体的な手法を2つ提示する。 1. **DocumentFragment**: 複数要素を追加する際のパフォーマンス上の利点。 2. **DOMツリーからのデタッチ**: 複雑な変更を行う際に要素を一時的にDOMから切り離す手法。 ## 要件 - **コード例**: 各項目について、操作対象のHTMLと、それを操作するJavaScriptをセットで提示すること。コードは自己完結型とし、すぐに実行・検証可能にしてください。 - **品質**: 各手法のパフォーマンスへの影響（例: リフローを誘発するか）や、セキュリティ上の注意点を必ず明記してください。冗長な説明は避け、簡潔かつ正確な記述を徹底してください。 - **形式**: Markdown形式を使用し、見出し、リスト、コードブロックを適切に使い分け、可読性を高めてください。